在 React 组件中转换字符串

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

子组件 JSX：-

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

请帮忙..

Answer 1

该字符串有JSX内容，可以直接渲染JSX内容，而且组件名称必须以大写字符开头。

看到这个答案：

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

非常感谢大家帮助我。图书馆 'react-jsx-parser' 解决了我的问题。

在 React 组件中转换字符串

Convert String in React Components

javascript

html

reactjs

react-jsx