我有一个包含变量的字符串:
var template = '<div>Hello {username}</div>';
用户名是由州设置的,如何解析此字符串并将其转换为反应组件?
答案 0 :(得分:7)
使用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'))
&#13;
<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>
&#13;
答案 1 :(得分:0)
我不确定你要做什么,但你可以做var template = (<div>{this.state.username}</div>)