Question

私は、実際にその小道具を入れ子にした反応成分名である文字列を持っています。その文字列を別の反応コンポーネント内にレンダリングしたい

class MainComponnet extends Component{ 
render(){ 
    let stringComponents = "<parentComponent title='Parent'><childComponent age='23'></childComponent></parentComponent>"; 
    return(
    {stringComponents} 
) 
} 
} 

親コンポーネントJSX： - - ：

class ParentComponent extends Component{ 
render(){ 
    return(
    <div> {this.props.title}</div> 
) 
} 
} 

子コンポーネントJSX： - たとえば

var String = "<parentComponent title='Parent'><childComponent age='23'></childComponent></parentComponent>" 

は、コードが反応

class ChildComponent extends Component{ 
render(){ 
    return(
    <div> {this.props.age}</div> 
) 
} 
} 

助けてください..

Answer 1

その文字列にはJSXコンテンツが含まれているため、JSXコンテンツを直接レンダリングすることもできます。また、コンポーネント名は大文字のcharaterで始まる必要があります。

がこの回答を参照してください：あなたが直接JSX要素を使用することはできません場合はReact - Adding component after AJAX to view

class MainComponnet extends Component{ 
render(){ 
    let stringComponents = <ParentComponent title='Parent'><ChildComponent age='23'></ChildComponent></ParentComponent>; 
    return(
    </div>{stringComponents}</div> 
) 
} 
} 

を、あなたはバベルを使ってJSXにあなたの文字列を変換することができます。しかし、それは良い考えではありません。ロジックを変更する必要があります。

たくさん私を助けるために一人一人のために

import babel from 'babel-core'; 
var Component = eval(babel.transform('<ParentComponent title='Parent'><ChildComponent age='23'></ChildComponent></ParentComponent>).code); 

Answer 2

感謝を次のようにあなたはそれを行うことができます。 ライブラリ 'react-jsx-parser'が私の問題を解決しました。