在react.js中将道具传递给父组件

Question

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

也许有一种方法可以将组件绑定到事件？

在使用React一年多后，在Sebastien Lorber的回答的激励下，我得出结论，将子组件作为参数传递给父母中的函数实际上不是React的方式，也不是一个好主意。我换了答案。

Answer 1

编辑：有关ES6更新的示例，请参见结尾示例。

这个答案简单地处理了直接亲子关系的情况。当parent和child可能有很多中介时，请检查以下答案。

虽然它们仍然工作得很好，但其他答案缺少了一些非常重要的东西。

var Child = React.createClass({
  render: function () {
    return <button onClick={this.props.onClick}>{this.props.text}</button>;
  },
});

var Parent = React.createClass({
  getInitialState: function() {
     return {childText: "Click me! (parent prop)"};
  },
  render: function () {
    return (
      <Child onClick={this.handleChildClick} text={this.state.childText}/>
    );
  },
  handleChildClick: function(event) {
     // You can access the prop you pass to the children 
     // because you already have it! 
     // Here you have it in state but it could also be
     //  in props, coming from another parent.
     alert("The Child button text is: " + this.state.childText);
     // You can also access the target of the click here 
     // if you want to do some magic stuff
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

var Parent = React.createClass({
  getInitialState: function() {
     return {childrenData: [
         {childText: "Click me 1!", childNumber: 1},
         {childText: "Click me 2!", childNumber: 2}
     ]};
  },
  render: function () {
    var children = this.state.childrenData.map(function(childData,childIndex) {
        return <Child onClick={this.handleChildClick.bind(null,childData)} text={childData.childText}/>;
    }.bind(this));
    return <div>{children}</div>;
  },

  handleChildClick: function(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
});

JSFiddle

也可以使用this.handlechildclick.bind（null,childIndex)，然后使用this.state.childrendata[childIndex]

注我们使用null上下文绑定，因为否则React会发出与其自动绑定系统相关的警告。使用null表示您不想更改函数上下文。又见。

var Parent = React.createClass({
  handleClick: function(childComponent) {
     // using childComponent.props
     // using childComponent.refs.button
     // or anything else using childComponent
  },
  render: function() {
    <Child onClick={this.handleClick} />
  }
});

<Child ref="theChild" .../>

React.findDOMNode(this.refs.theChild)

对于更高级的情况，您希望访问父级中子级的多个引用，子级可以在回调中直接传递所有dom节点。

组件有一个接口（道具），父组件不应该假设子组件的内部工作，包括它的内部DOM结构或它声明引用的DOM节点。父级使用子级的引用意味着您将这两个组件紧密地耦合在一起。

为了说明这个问题，我将引用关于影子DOM的这句话，它在浏览器中用于呈现滑块、滚动条、视频播放器等东西...：

在回调中传递整个组件是危险的，可能会导致新手开发人员做一些非常奇怪的事情，比如调用childcomponent.setstate(...)或childcomponent.forceupdate()，或者在父级中为它分配新的变量，从而使整个应用程序更难推理。

编辑:ES6示例

由于现在许多人都在使用ES6，这里有相同的ES6语法示例

const Child = ({
  onClick, 
  text
}) => (
  <button onClick={onClick}>
    {text}
  </button>
)

class Parent1 extends React.Component {
  handleChildClick(childData,event) {
     alert("The Child button data is: " + childData.childText + " - " + childData.childNumber);
     alert("The Child HTML is: " + event.target.outerHTML);
  }
  render() {
    return (
      <div>
        {this.props.childrenData.map(child => (
          <Child
            key={child.childNumber}
            text={child.childText} 
            onClick={e => this.handleChildClick(child,e)}
          />
        ))}
      </div>
    );
  }
}

const Parent2 = ({childrenData}) => (
  <div>
     {childrenData.map(child => (
       <Child
         key={child.childNumber}
         text={child.childText} 
         onClick={e => {
            alert("The Child button data is: " + child.childText + " - " + child.childNumber);
                    alert("The Child HTML is: " + e.target.outerHTML);
         }}
       />
     ))}
  </div>
)

PERF警告（应用于ES5/ES6):如果您正在使用purecomponent或shouldcomponentupdate，由于在呈现阶段使用onclick={e=>doSomething（）}，或者直接绑定，因此默认情况下不会优化上述实现，因为每次父级呈现时都会创建一个新函数。如果这是应用程序中的perf瓶颈，则可以将数据传递给子级，并将其重新注入“稳定”回调（在父类上设置，并绑定到类构造函数中的this)中，以便purecomponent优化能够发挥作用，或者您可以实现自己的shouldcomponentupdate并在props比较检查中忽略回调。

您还可以使用Recompose库，它提供更高阶的组件来实现微调优化：

// A component that is expensive to render
const ExpensiveComponent = ({ propA, propB }) => {...}

// Optimized version of same component, using shallow comparison of props
// Same effect as React's PureRenderMixin
const OptimizedComponent = pure(ExpensiveComponent)

// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedComponent = onlyUpdateForKeys(['propA', 'propB'])(ExpensiveComponent)

在这种情况下，您可以使用以下方法优化子组件：

const OptimizedChild = onlyUpdateForKeys(['text'])(Child)