React render component, используя его имя

Question

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

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

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

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

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

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

Answer 1

Вы были близки. Вам нужно передать класс компонента сам (не строку), а затем, поскольку синтаксис тега принимает переменную уже, вы избавляетесь от {} 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') 
);