Question

我想将一个道具传递给一个React Component，条件是父组件状态中的布尔值，该组件期望myProp为object，propTypes的爆燃是波纹管：

//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}
            />
        )
    }
...
}

执行上面的代码，它会在浏览器控制台中给出以下警告：

警告：道具类型失败：提供给myProp的{{1}}类型的道具boolean无效，预计为MyComponent。

Answer 1

在您的情况下myProp = {this.state.par && obj}如果this.state.par为false且obj存在，那么将返回布尔值false而不是obj，您应该将其写为

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

根据 docs ：

true && expression始终评估为expression，false && expression始终评估为false。

因此，如果条件为真，那么元素就在＆amp;＆amp;将   出现在输出中。如果是假，React将忽略并跳过它。

Answer 2

如果this.state.par为false，则this.state.par && obj为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

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

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

并处理子组件中的true / falsiness。

javascript＆amp;＆amp;操作员工作

3 个答案: