React.js：使用 React.render() 和 React.createClass() 的渲染传入子组件之间的区别？答案

【问题标题】：React.js: Difference between passing in the subcomponents with React.render() and with React.createClass()'s render?React.js：使用 React.render() 和 React.createClass() 的渲染传入子组件之间的区别？
【发布时间】：2015-07-01 04:53:00
【问题描述】：

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

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

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

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

后来发现可以在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 中组合组件的正确方法吗？

谢谢

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

组件也可以作为道具传递。组件只是 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} />;
  }
});

【讨论】：

感谢您的回答安德斯。通过将其他道具传递给它们仍然使它们动态化是什么意思？组件可以通过 props 传递吗？
@WalnutZ 我已经更新了我的帖子并进行了一些澄清。
谢谢！现在很清楚了。很抱歉，我现在没有足够的声誉来投票支持您的答案。
不客气！您始终可以将答案标记为正确。 :)

【解决方案2】：

这取决于你的用例，采取这两个形式的例子：

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

【讨论】：