reactjs如何向上传递数据？

Question

假设我有一个带有某些路径 app -> taskbar -> button -> modal -> textfield 的应用程序。我希望文本字段是一些设置用户输入并在应用程序的其他地方使用，例如 app -> differentButton -> differentModal 显示此用户设置

我是react新手，不过数据好像只能通过props往下走吧？是否期望我将此状态外部存储在数据库中？我 不介意 这样做，但似乎应该有一种我忽略的简单方法来做到这一点？

Answer 1

可以在parent组件中存储状态，不仅可以传递值，还可以传递修改值的函数 到 child。例如：

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 的 render 函数可能如下所示：

  render: function() {
    return (
        <TaskBar onTextSubmit={this.handleTextInput} />
    );
  }

在您的 TaskBar 组件中，您会将回调传递给 Button，依此类推。

最后，在您的 modal 组件中，您将拥有如下渲染函数：

 render: function() {
    return (
      <form onSubmit={this.props.onTextSubmit}>
       ...
      </form>
    );
  }

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

reactjs如何向上传递数据？

how do I pass data upwards in reactjs?

reactjs