ReactDOM.render(<xxx>content</xxx>,DOM) 中的content作用是什么

Question

  var Test = React.createClass({
    render:function(){
      return <div>{this.props.value}</div>
    }
  });
  ReactDOM.render(<Test value="test">Guess</Test>,document.getElementById('content'));

这是我做的测试,因为在Test中有render内容(this.props.value),在ReactDOM.render()之中也有内容(Guess),我想知道最后会按照哪个显示.

最后页面显示了 test ,而不是Guess;

那么我能不能这样认为: ReactDOM里面的内容只是为了提供Test显示的数据,但是是否显示还是要看Test里面render方法如何定义.

为了验证这个问题,我把上面的{this.props.value} 删掉之后,页面也变成了空白.

所以 ReactDOM.render(<xxx>content</xxx>,DOM) 中的content作用是什么呢?只是为了提供数据吗?

这应该是属于react的什么知识点呢,应该看什么方面的资料更深的理解?

Answer 1

嗯…这JSX语法的基础。它的概念与HTML的标签类似，标签有两种，一种是单个的，像下面这样:

<img src=".../image/logo.jpg" alt="" />

另一种是有前有后夹起来的，像下面这个:

<a href="http://qq.com" target="">QQ</a>

你的例子中，虽然是用了第二种有前有后夹起来的语法，但里面的值(Guess字符串)在render没被用this.props.children导出，所以不会呈现。与用第一种语法同结果。

所以你的认为:

ReactDOM里面的内容只是为了提供Test显示的数据,但是是否显示还是要看Test里面render方法如何定义.

是正确的。

所以 ReactDOM.render(<xxx>content</xxx>,DOM) 中的content作用是什么呢?只是为了提供数据吗?

是，你可以思考一下刚上面的HTML的第二种语法是为了什么而用，是为了网页上的连结呈现字词用。也算呈现用的数据。

不过在React中这有父层与子层(或称外层与内层)的树结构关系，父层组件的内部代码，对子层组件有决定权利，所以父层组件可以对子层组件在渲染前进行调整，例如要不要让子层组件呈现，或是更动子层组件的样式等等，甚至可以附加新对象结构进入子层组件，或更动子层组件的原本结构。所以这是一种很有用的语法。

这应该是属于react的什么知识点呢,应该看什么方面的资料更深的理解?

这是属于JSX语法的基础知识，以官网来说是这一篇JSX In Depth，应该有中译文档，网上要找找。

Answer 2

你的 content 对应在Test应该是
this.props.children
因为你写的位置是Test标签中间，对应一个文本节点，属于Test的子节点。