javascript - React.js : Difference between passing in the subcomponents with React. render() 和 React.createClass() 的渲染？

Question

我正在做一个使用 React.js 的项目，对 React 的组成非常困惑。

http://facebook.github.io/react/docs/multiple-components.html

上面的链接给出了一个例子。它使用 React.creatClass() 创建三个组件。一个父组件和两个子组件。父组件在 render 方法中包含它的 JSX 中的其他组件。

这个例子非常清晰，但不是很“可重用”。如果我想在另一种情况下传递另一个 child 怎么办？ React.js 似乎缺少像 Backbone 的 View 那样的“扩展”方法。

后来发现可以在React.render()中传递children组件，使用this.props.children进行合成。

  var Tom = React.createClass({
  render: function(){
      return(
          <a>This is Tom.</a>
      )
  }
  });

var John = React.createClass({
  render: function(){
      return(
          <a>This is John.</a>
      )
  }
});

var Outter = React.createClass({
componentDidMount:function(){
  console.log(this.props.children);
},

render: function(){
  return(
      <div className="test">
        {this.props.children}
      </div>
  )
}
});

React.render(<Outter><Tom /><John /></Outter>, document.getElementById('main'));

我认为这很好，但此方法与上面的示例之间的真正区别是什么？这种方法是在 React.js 中组合组件的正确方法吗？

谢谢

Answer 1

区别就像您所说的那样，您可以将任何您想要的组件作为该组件的子组件进行传递。使用 this.props.children 的组件通常是充当样式和行为包装器的组件，但组件的内容会根据不同的用例而变化。就像弹出窗口一样，您希望每个弹出窗口具有相同的外观和行为(例如关闭按钮)，但每个弹出窗口的内容都不同。

不使用 this.props.children 的组件更像是黑盒子，它们知道应该如何渲染它们以及它们需要什么子组件。但是您仍然可以通过将其他 Prop 传递给它们来使它们动态化。

组件也可以作为 props 传递。组件只是 JS 对象，任何 JS 对象都可以作为 prop 传递。但我认为我从未见过这样做的用例。如果您有一个包装器组件，其中包含两个或多个应渲染到的特定“插槽”，这可能是有道理的。像这样的东西:

var Wrapper = require('./wrapper');
var Header = require('./title');
var Content = require('./content');
var Footer = require('./footer');

var MyComponent = React.createClass({
  render() {
    return <Wrapper footer={Footer} header={Header} content={Content} />;
  }
});