React.js：使用React.render（）和React.createClass（）的渲染传递子组件之间的区别？

Question

I'm working on a project using React.js, and very confused about the composition of React.

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

the link above gives an example. It uses React.creatClass() create three components. A parent component and two child components. The parent component includes the others within it's JSX in the render method.

This example's very clear, but not very 'reusable'. What if I wanna pass in another child in another situation? React.js seems lacking the 'extend' method like Backbone's view.

later, I found that you can pass children components in the React.render(), and use this.props.children to composite.

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

I think that's great but what's the really difference between this method and the example above? is this method the right way to composite components in React.js?

thanks

Answer 1

The difference is just like you said, that you can pass any components you'd like as children of that component. Components that use this.props.children are usually components that acts as wrappers for style and behaviour, but the contents of the component changes for different use cases. Like a popup, where you want the same look and behaviour (like a close button) for every popup, but the contents of the popup is different for every popup.

Components that don't use this.props.children are more like black boxes, they know everything about how they should be rendered and what child components they need. But you can still make them dynamic by passing other props to them.

Components can be also be passed as props. Components are just JS objects, and any JS object can be passed as a prop. But I don't think I've ever seen a use case for doing it. It might make some sense if you have a wrapper component with two or more specific "slots" that should be rendered to. Something like:

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

It depends on your use-case, take this two examples of forms:

1. a login form - almost all login forms have the same structure, username/email, password, a keep me logged in checkbox, and a login button; a LoginForm component doesn't need to be further customised in regards to its structure so it's suitable to be used as is
2. a signup form - now depending on context you might give more or less fields to the user to complete when signing up, and in this case you use props.children