如何将变量传递给React组件

Question

例如，我们可以像这样创建一个React组件：

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

ReactDOM.render(<HelloMessage name="John" />, mountNode);

所以我可以从服务器传递消息变量吗？就像这样。

ReactDOM.render(<HelloMessage name="{{ message }}" />, mountNode);

- Frank Cheng

Answer 1

你想做的事情应该是可行的。你可以像你展示的那样实例化一个JavaScript变量，只需在你的视图服务器端呈现ReactDOM.render调用即可。无需在服务器端呈现React组件，只需在页面上呈现那个render调用即可。

例如，在你的JavaScript文件中，有一个组件（HelloMessage），就像你展示的那样。

然后，在页面上呈现你的第二段代码片段（服务器端）。

<script type="text/javascript">
    ReactDOM.render(<HelloMessage name="{{ message }}" />, mountNode);
</script>

- Donald