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

в React JSX, похоже, невозможно сделать что-то вроде этого:

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

Я получаю ошибку разбора: неожиданный токен {. Разве это не реакция? можете справиться?

я проектирую этот компонент так, чтобы под капотом значения, хранящиеся в this.props.component.slug будет содержать допустимые элементы HTML (h1,p и т. д.). Есть ли способ заставить это работать?

72
javascript reactjs

4 ответов

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

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

84

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

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

вот пример:

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/yc3qcd0u/

21

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

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"));
});
4

редактировать: может быть, вы забыли добавить /** @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, выход

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

3