React render компонент, используя его имя

Я экспериментирую с React.js, и он работает очень хорошо. Мне интересно, можно ли вводить классы в другие классы следующим образом:

var Container = React.createClass({
    render: function() {
      <{this.props.implComponent}/>
    }
});

Предполагая, что implComponent передан так:

React.render(
  <Container implComponent="somePredefinedVariable" />,
   document.getElementById('content')
);

Это не работает из-за ошибки синтаксиса. Я легко понимаю, почему.

Другими словами, я хотел бы вводить классы в другие классы на основе имен. Это возможно? Как я могу это сделать?

Ответы

Ответ 1

Ты был близок. Вам нужно передать класс компонента сам (не строку), а затем, поскольку синтаксис тега принимает переменную уже, вы избавляетесь от {} s. Также не забудьте вернуть node из рендера.

var Container = React.createClass({
    render: function() {
        return <this.props.implComponent />
    }
});

React.render(
  <Container implComponent={SomePredefinedVariable} />,
   document.getElementById('content')
);

Если вы хотите передать базовый компонент dom, вы должны использовать строку

Это имеет смысл, если вы думаете о результате преобразования

var Container = React.createClass({displayName: "Container",
    render: function() {
      return React.createElement(this.props.implComponent, null)
    }
});

ReactDOM.render(
  React.createElement(Container, {implComponent: SomePredefinedVariable}),
   document.getElementById('content')
);

ReactDOM.render(
  React.createElement(Container, {implComponent: "div"}),
   document.getElementById('content')
);