reactjs – 如何将带有变量的字符串解析为react组件？
发布时间：2020-12-15 09:32:07 所属栏目：百科 来源：网络整理
导读：我有一个变量里面的字符串： var template = 'divHello {username}/div'; 用户名是由州设置的,如何解析此字符串并将其转换为反应组件？ 解决方法 使用RegExp标识所有{}集.然后,将值替换为状态值并更新字符串.最后使用 dangerouslysetinnerhtml 将HTML字符串
|
我有一个变量里面的字符串：
var template = '<div>Hello {username}</div>';
用户名是由州设置的,如何解析此字符串并将其转换为反应组件？ 解决方法
使用RegExp标识所有{}集.然后,将值替换为状态值并更新字符串.最后使用
dangerouslysetinnerhtml
将HTML字符串插入react节点.查看示例. 希望这可以帮助！ class App extends React.Component{
constructor(props) {
super(props)
this.state = {
username: 'Pranesh',userId: 124,}
}
render(){
var template = '<div>Hello {username}. Your user id is {userId}.</div>';
var r = template.match(/{[w]+}/g);
r && r.forEach((state) => {
var regex = new RegExp(state,'g')
var stateItem = state.split(/{|}/g)[1]
template = template.replace(regex,this.state[stateItem])
})
return <div dangerouslySetInnerHTML={{__html: template}}/>
}
}
ReactDOM.render(<App/>,document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |