는 동적으로 구성 요소가

Question

에서 그것을 이런 식으로 뭔가를 할 수 표시되지 않습니다 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 등)가 포함됩니다. 이 일을 할 수있는 방법이 있습니까?

Answer 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://facebook.github.io/react/jsx-compiler.html

: 또한 http://jsfiddle.net/kb3gN/6668/

, 당신은 오류 이런 종류의 디버깅 JSX 컴파일러가 도움이 찾을 수 있습니다

Answer 2

: /** @jsx React.DOM */을 js 시작 부분에 추가하는 것을 잊어 버렸습니까? 나는 반작용 전문가가 아니다

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

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

,하지만 난 모든 구성 요소가 처음에 특정 태그로 구성해야한다고 생각 :

당신은 비록 React.DOM를 사용할 수 있습니다. 그래서 명확한 목적을 제시 할 수 있습니다.

Answer 3

이전에 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/

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