Динамічний візуалізація компонента React

У React JSX, здається, неможливо зробити щось подібне:

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

Я отримую помилку синтаксичного аналізу: Несподіваний маркер {. Хіба це не те, що реагує React?

Я розробляю цей компонент так, щоб під капотом значення, що зберігаються в this.props.component.slug, містили допустимі елементи HTML (h1, p тощо). Чи є спосіб зробити так, щоб це працювало?

Не слід класти компонентний кульок у фігурні дужки:

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 Compiler може бути корисним для налагодження таких помилок: http://facebook.github.io/react/jsx-compiler.html

Як раніше зазначав Нілгун, кульовий компонент не слід обгортати фігурними дужками.

Якщо ви вирішили зберегти його у змінній, переконайтесь, що він починається з великої літери.

Ось приклад:

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/

Якщо ви маєте намір ввести фактично відтворений компонент, ви можете зробити щось подібне, що є дуже зручним для тестування, або з будь-якої причини, за якою ви хочете динамічно вводити компоненти для візуалізації.

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

Редагувати : Може, ви забули додати /** @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, але я думаю, що кожен компонент повинен бути побудований з певним тегом на початку. Тож це могло б мати чітку мету.

Рішенням для мене було призначити імпортований Компонент змінній (за допомогою CapitalCase), а потім відтворити цю змінну.

Приклад:

import React, { Component } from 'react';
import FooComponent from './foo-component';
import BarComponent from './bar-component';

class MyComponent extends Component {
    components = {
        foo: FooComponent,
        bar: BarComponent
    };

        //this is the most important step
       const TagName = this.components.foo;

    render() {
       return <TagName />
    }
}
export default MyComponent;