리액트 컴포넌트 동적 렌더링

리액트 컴포넌트 동적 렌더링

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 등)가 포함됩니다.이 일을 잘 할 수 있는 방법이 있을까요?

컴포넌트 슬래그는 컬리 브레이스 안에 넣지 마십시오.

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

저는 리액트 전문가는 아니지만, 모든 컴포넌트는 처음에 특정 태그로 구성되어야 한다고 생각합니다.그래서 그것은 그 자체로 명확한 목적을 제시할 수 있었다.

솔루션으로는 Import한 컴포넌트를 변수(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;

언급URL : https://stackoverflow.com/questions/26518629/dynamically-rendering-a-react-component