React 컴포넌트를 동적으로 렌더링

React JSX에서는 다음과 같은 작업을 수행 할 수 없습니다.

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

구문 분석 오류가 발생합니다. Unexpected token {. 이것은 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 컴파일러를 찾을 수 있습니다. http://facebook.github.io/react/jsx-compiler.html

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