在React组件中转换字符串

Kracki 发表于 Dev

克拉奇

我有一个字符串，它实际上是带有其属性的嵌套react组件名称。想要在另一个react组件中渲染该字符串。例如

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

子组件JSX：-

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

请帮忙..

Shubham Khatri

该字符串具有JSX内容，您可以直接呈现JSX内容，组件名称也必须以大写字符开头。

看到这个答案：React-在AJAX之后添加组件以查看

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。