Реагировать на компонент рендеринга, используя его имя

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

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

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

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

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

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


reactjs javascript react-jsx
person rpechayr    schedule 13.01.2015    source источник

Ответы (1)


arrow_upward
18
arrow_downward

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

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')
);
person Brigand    schedule 13.01.2015