Динамическое отображение компонента React

Ответ 1

Вы не должны помещать компонентную пулю в фигурные скобки:

var Hello = React.createClass({
    render: function() {
        return <this.props.component.slug className='text'>
            {this.props.component.value}
        </this.props.component.slug>;
    }
});

React.renderComponent(<Hello component={{slug:React.DOM.div, value:'This is my header'}} />, document.body);

Вот рабочая скрипка: http://jsfiddle.net/kb3gN/6668/

Кроме того, вы можете найти компилятор JSX полезным для отладки таких ошибок: http://facebook.github.io/react/jsx-compiler.html

Ответ 2

Как уже указывал nilgun, компонентная пуля не должна быть завернута в фигурные скобки.

Если вы решили сохранить его в переменной, убедитесь, что она начинается с заглавной буквы.

Вот пример:

var Home = React.createClass({
  render: function() {
    return (
      <div>
        <h3>This is an input</h3>
        <CustomComponent inputType="input" />
        <h3>This is a text area</h3>
        <CustomComponent inputType="textarea" />
      </div>
    );
  }
});

var CustomComponent = React.createClass({
  render: function() {
    // make sure this var starts with a capital letter
    var InputType = this.props.inputType;
    return <InputType />;
  }
});

React.render(<Home />, document.getElementById('container'));

Здесь рабочая скрипка: https://jsfiddle.net/janklimo/azzohvn1/4/

Ответ 3

Изменить. Возможно, вы забыли добавить /** @jsx React.DOM */ в начале js?

Вы можете использовать React.DOM, хотя:

render: function() {
  return React.DOM[this.props.component.slug](null, this.props.component.value);
}

http://jsbin.com/rerehutena/2/edit?html,js,output

Я не эксперт по React, но я думаю, что каждый компонент должен быть сконструирован с определенным тегом в начале. Таким образом, он может представлять собой ясную цель.

Ответ 4

Если вы намерены вставлять фактический отображаемый компонент, вы можете сделать что-то вроде этого, что очень удобно для тестирования, или по какой-либо причине вы хотели бы динамически вставлять компоненты для рендеринга.

var MyComponentF=function(ChildComponent){
    var MyComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="MyComponent">
                    <ChildComponent></ChildComponent>
                </div>
            );
        }
    });
    return MyComponent;
};

var OtherComponentF=function(){
    var OtherComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="OtherComponent">
                    OtherComponent
                </div>
            );
        }
    });
    return OtherComponent;
};

var AnotherComponentF=function(){
    var AnotherComponent = React.createClass({
        getInitialState: function () {
            return {
            };
        },
        componentDidMount: function () {
        },
        render: function () {
            return (
                <div className="AnotherComponent">
                    AnotherComponent
                </div>
            );
        }
    });
    return AnotherComponent;
};

$(document).ready(function () {
    var appComponent = MyComponentF(OtherComponentF());

    // OR
    var appComponent = MyComponentF(AnotherComponentF());

    // Results will differ depending on injected component.

    ReactDOM.render(React.createElement(appComponent), document.getElementById("app-container"));
});