React.js：使用 React.render() 和 React.createClass() 渲染传递子组件的区别？

Question

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

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

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

这个例子很清楚，但不是很清楚'reusable'。如果我想在另一种情况下传递另一个 child 怎么办？ React.js 似乎缺少像 Backbone 的观点那样的 'extend' 方法。

后来发现可以在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 的组件更像是黑盒子，它们知道应该如何渲染它们以及它们需要哪些子组件。但是您仍然可以通过将其他道具传递给它们来使它们动态化。

组件也可以作为道具传递。组件只是 JS 对象，任何 JS 对象都可以作为 prop 传递。但我认为我从未见过这样做的用例。如果您有一个包含两个或更多特定 "slots" 的包装器组件应该被渲染到，这可能是有道理的。类似于：

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} />;
  }
});

Answer 2

这取决于您的用例，以这两个表单示例为例：

登录表单——几乎所有登录表单都具有相同的结构，username/email、密码、保持登录复选框和登录按钮； LoginForm 组件不需要进一步定制其结构，因此适合按原样使用
注册表单 - 现在根据上下文，您可以在注册时为用户提供更多或更少的字段以完成，在这种情况下，您使用 props.children

React.js：使用 React.render() 和 React.createClass() 渲染传递子组件的区别？

React.js: Difference between passing in the subcomponents with React.render() and with React.createClass()'s render?

javascript

reactjs