将React.FC组件的onClick函数转换为React.FC

Question

我有一个Tab组件，它是制表符结构的一部分，但我需要将它转换为React.FC。下面是我到目前为止所做的工作，但我对onclick的功能感到困惑。

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Tab extends Component {
 static propTypes = {
      activeTab: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      onClick: PropTypes.func.isRequired
    };

    onClick = () => {
      const { label, onClick } = this.props;
      onClick(label);
    }

    render() {
      const {
        onClick,
        props: {
          activeTab,
          label
        }
      } = this;

      let className = 'tab-list-item';

      if (activeTab === label) {
        className += ' tab-list-active';
      }

      return (
        <li
          className={className}
          onClick={onClick}
        >
          {label}
        </li>
      );
    }
}

export default Tab; 

这是我非常糟糕的尝试，显然是非常糟糕的。

import React from 'react';

/**
 * @function Tab
 */
 const Tab: React.FC = () => {
  

  type Props = {
    activeTab: string;
    label: string;
  }

    const onClick = (props) => {
      const { label, onClick } = props;
      onClick(label);
    }

    const {
      onClick,
      props: {
        activeTab,
        label
      }
    } = this;

      let className = 'tab-list-item';

      if (activeTab === label) {
        className += ' tab-list-active';
      }

      return (
        <li
          className={className}
          onClick={onClick}
        >
          {label}
        </li>
      );
    
}

export default Tab;

任何帮助都是非常感谢的，谢谢！

Answer 1

如果使用的是类型记录，则可以在类型/接口中定义所有组件支持，并将其交给React.FC类型，例如：

import React from 'react';

interface Props {
  activeTab: string;
  label: string;
  onClick: (label: string) => void; // this means that the onClick param is a function that takes a label of type string as function parameter
}

// here we create a React functional component and we pass the Props interface to specify the component props

const Tab: React.FC<Props> = (props) => {
  const handleOnClick = () => {
    props.onClick(props.label)
  }

  let className = 'tab-list-item';

  if (props.activeTab === props.label) {
    className += 'tab-list-active';
  }

  return (
    <li
      className={className}
      onClick={props.handleOnClick}
    >
      {props.label}
    </li>
  );  
}

export default Tab;

如果您知道如何析构一个对象，您可以这样清理您的函数：

import React from 'react';

interface Props {
  activeTab: string;
  label: string;
  onClick: (label: string) => void; // this means that the onClick param is a function that takes a label of type string as function parameter
}

// here we create a React functional component and we pass the Props interface to specify the component props

const Tab: React.FC<Props> = ({activeTab, label, onClick}) => {
  const handleOnClick = () => {
   onClick(label)
  }

  let className = 'tab-list-item';

  if (props.activeTab === label) {
    className += 'tab-list-active';
  }

  return (
    <li
      className={className}
      onClick={handleOnClick}
    >
      {label}
    </li>
  );  
}

export default Tab;