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

请帮助..

一个问题，为什么它在一个字符串内？ – VivekN

其实服务将返回组件字符串，因此我必须呈现该组件。 – Kracki

我认为这样做有些不可能。可能你需要一个react-jsx-parser来将字符串转换为正常的组件类型，然后渲染它 – VivekN

答

该字符串具有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元素，你可以使用通天改变你的字符串JSX。但它不是一个好主意。你应该修改你的逻辑。

的很多，每一个对我的帮助如下

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

Thanks for Reply @Shubham，但如果你会注意到我的字符串被双引号括住，而你没有。它的数据类型是字符串，因此在呈现其不处理反应组件时。 – Kracki

准确地说，我不需要在双引号内围绕字符串，直接将JSX内容分配给变量 –

我没有任何其他选项，这是从后端获取json的内容。如果我可以删除UI上的引号或其他任何方式从String加载组件将会有所帮助。 – Kracki

答

感谢你能做到这一点。库'react-jsx-parser'解决了我的问题。

在React组件中转换字符串

相关推荐