Question

考虑此反应组件代码语法，包括prop-type：

import PropTypes from 'prop-types';
    class MyComponent extends React.Component {
      render() {
        const children = this.props.children;
        return (
          <div>
            {children}
          </div>
        );
      }
    }

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

我想应用以上语法来重构此代码。但是我在行resetHighlights：（）=> void时遇到问题。如果有人重构整个打击代码，那就太好了

    type Props = {
      highlights: Array<T_ManuscriptHighlight>,
      resetHighlights: () => void
    };

    const updateHash = highlight => {
      location.hash = `highlight-${highlight.id}`;
    };

    function Sidebar({ highlights, resetHighlights }: Props) {
      return (
        <div>
         ...
        </div>
      );
    }

导出默认边栏；

我也想在全状态类中添加如下功能，但出现错误：

 togglePersonsHandler = () => {
        const show = this.state.showPersons;
        this.setState({showPersons: !show});
    };

Answer 1

看起来该文件正在使用流或打字稿提供静态打字，而不是prop-types。如果您想删除打字稿/流的用法，那么对prop-types所做的最好的修改就是

Sidebar.propTypes = {
  highlights: PropTypes.arrayOf(PropTypes.shape({...})),
  resetHighlights: PropTypes.func
}

如果代码库经常使用Typescript / flow，可能要坚持使用它；类型安全性可以很好。

新的props类型react组件语法，从JS函数制作有状态的类组件

1 个答案: