Question

是否有最佳实践来使React组件具有必填属性？

反正还可以将属性设置为不可为空，因此不会是null或undefined吗？

Answer 1

通过使用prop-types包（read more），React具有一些内置的类型检查功能

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    const myProp = this.props.myProp;
    return (
      <div>
      </div>
    );
  }
}

MyComponent.propTypes = {
  myProp: PropTypes.string.isRequired
};

请记住，这种类型检查仅在开发模式下完成。

Answer 2

这取决于期望的行为。

一种常见的方法是使用React prop类型，正如其他答案已经提到的那样。在开发模式下，它们会导致警告（尽管会作为控制台错误输出），而在生产环境中则没有操作。

由于没有现有的非空类型，因此可以自定义prop类型函数：

const nullablePropType = (props, propName, componentName)  => {
  if (props[propName] == null)
    return new Error('Prop `' + propName + '` is nullable in `' + componentName + '`.');
};

const Foo = props => ...;
Foo.propTypes = { bar: nullablePropType };

Answer 3

如果必须使用，则可以在constructor或componentDidMount或getDerivedStateFromProps component lifecycle methods处检查属性并在那里进行处理。

或使用default props为undefined道具（null被视为值）自动设置值

如何在React组件中强制设置属性？

3 个答案: