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

此组件初始化状态并将其作为道具传递给孩子。在你的情况下<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中，我将本地状态的状态设置为传递下来的props的值。现在组件重新渲染，这次localArray有数据，现在是表，然后选择do render。最后，现在传递给select和table组件的数据是state而不是props，可以修改它。

最后一点，您当然可以将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>
    }
}

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

使用React State值和Props

2 个答案: