将 React 组件的 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

如果你使用的是 typescript，你可以在一个 type/interface 中定义所有的组件 props 并将其赋予 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;

将 React 组件的 onClick 函数更改为 React.FC

Changing onClick function of React Component to React.FC

javascript

reactjs

typescript

tsx