reactjs - React 从子级获取父级 props 的正确方法是什么

Question

请耐心等待，我是 React 新手。

在这个片段中(它不起作用)我想要，

在CommentForm中，获取url props的值

来自评论框。

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    return (
      <div className="commentList">
        Hello, world! I am a CommentList.
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <div className="commentForm">
        Hello,  my test url {this.props.url} !.
      </div>
    );
  }
});

React.render(
  <CommentBox url="api/comments" />,
    document.getElementById('content')
);

什么是正确的方法？

为什么父级不能直接向子级提供这些 props？

Answer 1

您需要显式地将 props 从父级传递给子级。更改 CommentBox 的 render 函数将解决该问题:

var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList />
        //The next line is where you can pass the URL to the CommentForm
        <CommentForm url={this.props.url}/>
      </div>
    );
  }
});

根据您的示例改编的工作 jsfiddle:http://jsfiddle.net/kb3gN/10352/

文档说“对于亲子交流，只需传递 props 即可”。看 http://facebook.github.io/react/tips/communicate-between-components.html

作为显式传递 props 的替代方案，React 未记录的 context 功能更接近您正在寻找的功能: https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html并在 1.0 的路线图上 https://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html#context .

也就是说，传递 props 是正常模式。