Question

我正在使用React with Rails 4。

我有以下内容：

<%= react_component('Box',url: "blah", pollInterval: 2000) %>

然后是我的组件：

var Box = React.createClass({
      getInitialState: function () {
    return {data: []};
  },
  loadStuffFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      success: function(data) {
        this.setState({data: data});
        console.log(data);
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(this.props.url, status, err.toString());
      }.bind(this)
    });
  },
  componentDidMount: function() {
    this.loadStuffFromServer();
    setInterval(this.loadStuffFromServer, this.props.pollInterval);
  },
  render: function() {
    return (
      <div>
        <Widget office="1" data="{this.state.data}"/>
      </div>
    );
  }
});

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

对于Box，我可以看到使用React DevTools for Chrome，状态被设置为url返回的JSON。但是对于Widget组件，当我尝试回显支持时，它会返回：{this.state.data}

所以道具正在设置，但是要设置一个字符串而不是JSON数组？

Answer 1

引号内的任何属性都是一个字符串：

<Widget office="1" data="{this.state.data}"/>

要使用JavaScript表达式，请仅使用curlies：

<Widget office="1" data={this.state.data}/>

国家没有进入道具

1 个答案: