如何在reactjs中向上传递数据？

Question

说我的应用程序有一些路径app -> taskbar -> button -> modal -> textfield。我希望文本字段设置为用户输入并在应用程序的其他位置使用，可能app -> differentButton -> differentModal显示此用户设置，例如

我是全新的反应，但似乎数据只能通过道具向下，对吧？是否期望我将此状态存储在数据库外部？我不是介意这样做，但似乎应该有一个简单的方法来做我忽略的事情？

Answer 1

您可以将状态存储在父组件中，不仅可以传递值，还可以传递将值修改为子项的函数。例如：

const App = React.createClass({
    getInitialState () {
        return {
            name: 'Dave'
        };
    },
    render () {
        return (
            <div>
                <MyComponent name={this.state.name} changeName={this.onChangeName} />
            </div>
        )
    },
    onChangeName (name) {
         this.setState({ name });
    }
});

const MyComponent = React.createClass({
    propTypes: {
         name: React.PropTypes.string,
         changeName: React.PropTypes.func.isRequired
    },
    render () {
        return (
            <div>
                <input value={this.props.name} onChange={this.props.changeName} />
            </div>
        );
    }
});

Answer 2

规范的方法是通过props从视图层次结构中较高的组件传递回调函数。

更高阶的组件将封装您希望修改的状态，从而触发子树的重新渲染。

在您的情况下，您似乎必须使用App作为共享状态的共享父组件。所以在App中，你可能有一个函数，如：

  handleTextInput: function(text) {
    // handle the text input here (set some state, make an ajax call, etc)
  },

App的{​​{1}}函数可能如下所示：

render

在 render: function() { return ( <TaskBar onTextSubmit={this.handleTextInput} /> ); } 组件中，您可以将回调传递给TaskBar，依此类推。

最后，在你的Button组件中，你有一个渲染函数，如：

modal

当然，如果您有一个深层嵌套的层次结构，这很快就会变得非常笨拙，所以更好的方法是使用库进行状态管理，例如Redux。