如何将状态与父组件传递给子组件

Question

有没有办法将状态从父组件传递到子组件，例如：

var ParentComponent = React.createClass({
  getInitialState: function() {
    return {
      minPrice: 0
    }
  },
  render: function() {
    return (
      <div onClick={this.doSomething.bind(this, 5)}></div>
    );
  }
});

var ChildComponent = React.createClass({
  getInitialState: function() {
    return {
      minPrice: // Get from parent state
    }
  },
  doSomething: function(v) {
    this.setState({minPrice: v});
  },
  render: function() {
    return (
      <div></div>
    );
  }
});

我想从子组件更改父状态值。在 react.js 中是否可能？

Answer 1

There is 但它并不打算在 React 中那样工作。 2-way 数据绑定不是 React 的方式，摘自文档。

在 React 中，数据以一种方式流动：从所有者到孩子。

如果你想在你的子组件中操作父状态，你想要做的就是传递一个监听器。

//parent component's render function
return (
   <Child listenerFromParent={this.doSomething} />
)

//child component's render function
return (
  <div onClick={this.props.listenerFromParent}></div>
)

Answer 2

您可以使用limelights 解决方案，即将一个函数从父级传递给子级。

或者您也可以使用像 React-Cursor 这样的项目，它允许轻松地操纵从子组件中的父组件传递的状态。

---

我已经制作了我的自制框架（Atom-React，some details here），它也使用游标（受 Om 启发），并且您可以通过某种方式轻松实现 2 路数据绑定，游标允许操纵由父组件。

这是一个示例用法：

<input type="text" valueLink={this.linkCursor(this.props.inputTextCursor)}/>

inputTextCursor是一个从父组件传递给子组件的游标，子组件可以轻松无缝地更改父组件的数据。

我不知道其他基于游标的 React 包装器是否使用这种技巧，但 linkCursor 函数通过简单的 mixin 很容易实现：

var ReactLink = require("react/lib/ReactLink");

var WithCursorLinkingMixin = {
    linkCursor: function(cursor) {
        return new ReactLink(
            cursor.getOrElse(""),
            function setCursorNewValue(value) {
                cursor.set(value);
            }
        );
    }
};
exports.WithCursorLinkingMixin = WithCursorLinkingMixin;

因此您可以轻松将此行为移植到React-Cursor