Question

我正在查看https://facebook.github.io/react/docs/component-specs.html的文档，但无法弄清楚我遇到这个问题的原因。

我的情况是我有一个像

这样的组件

export default class MyComponent extends Component
{
    constructor(props)
    {
       super(props);

       this.state = { something: null };
    }

    render() 
    {
       // ... uses something
    } 

ProductSorter.propTypes =
{
   something: PropTypes.string.isRequired
}

我的render函数当然假定something不是null，因为该属性是必需的。但是，似乎render在收到something的道具之前仍然被调用。

此外，我正在使用MyComponent之类的

{ valueIsNonNull && <MyComponent something={value} }

在传递render之前，

仍在调用something。

我做错了什么？

Answer 1

如果有什么东西作为道具进入，您可以通过this.props.something

在组件内部访问它

componentWillReceiveProps是在组件接收新道具时调用的。初始渲染不会调用此方法。

Answer 2

请咨询https://facebook.github.io/react/docs/reusable-components.html

//您可以使用isRequired链接上述任何内容以确保警告
如果未提供道具，则显示
//。

因此，PropTypes不会停止它的render()函数，尽管程序员没有提供required props它只会在你的控制台上显示警告

如果您想检查该道具，请将其添加到渲染

render () {
    if(typeof this.props.SomeRequiredProp === 'undefined') return null

    {/*the following will renders when the required prop is supplied*/}
    <div>Rendered! {this.props.SomeRequiredProp}</div>
}

为什么在我的componentWillReceiveProps（）之前调用我的render（）函数？

2 个答案: