javascript - 使用 React State 值和 Props

Question

我有两个 react 组件:

<select> and <mytable>

我需要用它来构建 <myInterface> .设 S 为 <myInterface> 的状态需要由 <select> 修改并被 <mytable> 使用.但是，S 需要通过如下调用接收初始值:

<myInterface S = {some value} />

紧接着<select>需要使用刚刚输入的值，之后只有状态 S。

有没有办法在 React 中做这样的事情？我不能修改 <mytable>或 <select>但它们具有可以使用 S 的相关属性。 我需要补充:我正在使用类似的东西:

var myInterface = React.createClass({
    ...
    render: function() {
        <div> 
             <select  ...... />
             <mytable ...... />
        </div>
    }
});

build <myInterface> .

Answer 1

好的，这是一个伪代码示例，说明如何解决此问题。

您有一个容器组件可以呈现您的 <myInterface />它看起来像这样。

class Container extends React.Component {
    constructor() {
        super();
        this.state = {
            myState: [1,2,4,5,6]
        }
    }

    redner() {
        return (
            <MyPage data={this.state.myState} />
        )
    }
}

此组件初始化状态并将其作为 Prop 传递给 child 。在您的情况下， child 是 <myINterface />看起来像这样。

class MyPage extends React.Component {
    constructor() {
        super();
        this.state = {
            localState: []
        }
    }

    componentDidMount() {
        this.setState({localState: this.props.data});
    }

    render() {
        let table;
        let select;
        if(this.state.localState.length > 0) {
            table = <MyTabel data={this.state.localState} />
            select = <Select data={this.state.localState} />
        }
        return (
            <div>
                {table}
                {select}
            </div>
        )
    }
}

这个子组件有它自己的状态，它跟踪我们从一个空数组开始的状态。

我在渲染中有一个 if 检查，用于检查 localState 数组是满的还是空的。只有当它已满时，我才会渲染表格并进行选择。然后在 componentDidMount 中，我将本地状态的状态设置为传递下来的 Prop 的值。现在组件重新呈现，这次 localArray 有数据，现在表格和选择进行呈现。最后，现在传递给选择和表格组件的数据是状态而不是 Prop ，可以对其进行修改。

最后一点，你当然可以在构造函数中将 localState 初始化为容器传入的 props 的值，但我选择在 componentDidMount 中这样做，因为它被认为是设置 props 的反模式在构造函数中声明。

希望这对您有所帮助。