Question

请耐心等待我在React的新人。

在这个片段（它不起作用）我想要，

在CommentForm中

，获取url props的值

来自CommentBox的

。

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')
);

什么是正确的方式？

为什么道具不能直接从父母那里获得？

Answer 1

您需要明确地将道具从父级传递给子级。更改render的{{1}}功能可解决问题：

CommentBox

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

文档说“对于亲子沟通，只需传递道具”。看到 http://facebook.github.io/react/tips/communicate-between-components.html

作为显式传递道具的替代方法，React的未记录的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> ); } });功能更接近您所寻找的内容： 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的路线图。

那就是说，传递道具是正常模式。

反应是什么是从他的孩子获得父道具的正确方法

1 个答案: