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

Question

我有一个包含变量的字符串：

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

用户名是由状态设置的，如何解析此字符串并将其转换为React组件？

- chulian

---

你为什么不直接使用JSX而不是字符串呢？var template = <div>Hello {username}</div>可以直接使用，无需任何花哨的东西。 - finalfreq

我有HTML文件分开存储，工作政策规定设计师不能更改js文件，只能更改HTML文件。 - chulian

这个问题已经被提出并得到了回答。答案链接。 - Konstantin Vitkovsky

我正在使用babel.transform('<div>hello</div>').code，但是出现了“Unexpected token”错误，同时"import babel from 'babel-core';"也生成了一个“TypeError: isNaN is not a function”的错误，看起来它与我的meteor + redux + react应用程序不兼容。 - chulian

Answer 1

使用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>

- Pranesh Ravi

Answer 2

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

- Lionel Dcosta

---

问题在于字符串来自使用fs.read读取的HTML文件。 - chulian