如何将带有变量的字符串解析为反应组件？

Question

我有一个字符串，里面有一个变量：

var template = '<div>Hello {username}</div>';

用户名是state设置的，如何解析这个字符串变成react组件？

Answer 1

我不确定你想做什么，但你可以做 var template = (<div>{this.state.username}</div>)

Answer 2

使用RegExp识别所有{}组。然后，用状态值替换该值并更新字符串。最后使用 dangerouslysetinnerhtml 将 HTML 字符串插入反应节点。请参阅示例。

希望对您有所帮助！

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>

如何将带有变量的字符串解析为反应组件？

How to parse a string with variables into a react component?

jsx

reactjs