使用 React State 值和 Props

Question

我有两个反应组件：

<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>
    }
});

建造<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} />
        )
    }
}

此组件初始化状态并将其作为道具传递给 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>
        )
    }
}

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

我在渲染中有一个 if 检查，用于检查 localState 数组是满的还是空的。只有当它已满时，我才会渲染 table 和 select。然后在 componentDidMount 中，我将本地状态的状态设置为传递下来的道具的值。现在组件 re-renders 并且这次 localArray 有数据，现在 table 和 select 进行渲染。最后，现在传递给 select 和 table 组件的数据是状态而不是道具，它可以被修改。

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

希望这对您有所帮助。

Answer 2

你应该这样做：

import { Component } from 'react';

export default class MyInterface extends Component {

    constructor(props) {
        super(props);

        this.state = {
            value: 'initial value'
        };

        this.setValue = this.setValue.bind(this);
    }

    setValue(value) {
        this.setState({ value })
    }

    render() {
        <div> 
             <Select  handleChange={this.setValue} />
             <MyTable value={this.state.value} />
        </div>
    }
}

因此您可以在 Select 组件上设置调用函数 this.props.handleChange 的值。

使用 React State 值和 Props

Using React State values and Props

javascript

state

ecmascript-6

reactjs