Question

我有一个字符串，它实际上是一个嵌套的反应组件名称及其道具。想要将该字符串呈现在另一个反应组件中。例如

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

反应代码： -

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

Child Component JSX： -

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

请帮助..

Answer 1

该字符串具有JSX内容，您可以直接呈现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元素，你可以使用babel将你的字符串转换为JSX。然而，这不是一个好主意。你应该修改你的逻辑。

您可以按照以下方式执行此操作

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

Answer 2

非常感谢每一位帮助我的人。 Library＆＃39; react-jsx-parser＆＃39;解决了我的问题。

在React组件中转换字符串

2 个答案: