javascript是如何实现的

Question

我想将一个道具传递给React组件，以父组件状态中的布尔值为条件，该组件希望将myProp作为对象，道具类型冲突如下：

//component's code
class MyComponent extends Component {

    ...
    static propTypes = {
        myProp: propTypes.object
    }
    ...
}

现在，我要通过下面的道具：

//Parent component's code
class ParentComponent extends Component {
    constructor() {
        super();
        this.state = {
          par: true,
        }
    }
    render(){
        const obj = {
            key1: 'value1',
            key2: 'value2'
        }
        ...
        return ( 
            <MyComponent
                myProp = {this.state.par && obj}
            />
        )
    }
...
}

执行上述代码时，浏览器控制台中会出现以下警告：

警告：失败的道具类型：提供给MyComponent的类型为boolean的无效道具myProp，应为对象。




Answer 1

我会将布尔值作为属性包含在obj中，并检查子组件中的值

render() {
   const obj = {
        key1: 'value1',
        key2: 'value2'
        par: this.state.par
    }
   return(
       <MyComponent myProp={obj} />
   );
}

并处理子组件中的正确/错误。

Answer 2

如果。状态par为false，则为此。状态标准杆数

您可能需要使用条件运算符：

return ( 
    <MyComponent
        myProp = {this.state.par ? obj : null}
    />
)

现在，不管标志是什么，您都提供了类型为object（obj或null）的内容。

或者更隐晦一点，添加一个||：

return ( 
    <MyComponent
        myProp = {this.state.par && obj || null}
    />
)

...但我会用条件句。

当然，MyComponent需要了解myProp可能是null。。。

Answer 3

在你的情况下myProp={this.state.par

myProp = {this.state.par? obj: null}

根据文件：

true

因此，如果条件为true，则元素