Question

我的目标是将状态布尔值传递给父组件，父组件可用于隐藏和显示另一个子组件。示例：我有三个组件。 ListViewComponent，ErrorMessageComponent和ParentComponent（绑定前两个）。在ListViewComponent中有一个布尔值，仅当后端数据长度为零时才为真。我想在父组件中发送该布尔值，并根据该布尔值显示或隐藏ErrorMessageComponent。

ListViewComponent：

validateData(newProps){
    this.props.onDataLengthZero(newProps.data.length == 0);
}

为父级：

render() {
    return (
        <View>
            <ListViewComponent />
            <ErrorMessageComponent errorText="My error message Text" />
        </View>
    );
}

我如何在父组件中使用onDataLengthZero并隐藏ErrorMessageComponent如果它是真的？

Answer 1

不要尝试传递布尔值来备份层次结构，而是将数据传递下来。获取ParentComponent中的后端数据，以便检查其长度，然后将数据传递到ListViewComponent。

如果您必须以另一种方式备份，则可以将回调函数从ParentComponent传递到ListViewComponent，但这在概念上更难以遵循。

Answer 2

您可以通过使用回调函数向子项发送道具来与父组件通信。您可以在那里设置父状态（使用布尔值）。然后，您可以在子组件中调用该函数并修改父级的状态。您可以找到此机制here的示例。在你的情况下，它会是这样的：

父组件：

showError(){
    this.setState({
        showError: true;
    });

}
render() {
    let error = undefined;
    if(this.state.showError == true){
        error = <ErrorMessageComponent errorText="My error message Text" />;
    }
    return (
        <View>
            <ListViewComponent handleError={this.showError}/>
            {error}
        </View>
    );
}

通过组件反应传输布尔值

2 个答案: