在渲染函数中返回变量

Question

如何在反应组件渲染函数中返回变量，
我尝试输出列表，并且必须在循环期间在 wrap/container 标记属性中打印一些数据。

var WFilterOptionListLevel0 = React.createClass({
  loadOptionLevel0: function() {
    $.ajax({
      url: this.props.getOption,
      data: {"level":0},
      type: 'POST',
      dataType: 'json',
      success: function(data) {
        this.setState({optionLevel0: data.option.list});
      }.bind(this),
    });
  },

  getInitialState: function() {
    return {optionLevel0: []};
  },
  componentDidMount: function() {
    this.loadOptionLevel0Mock();
    this.loadOptionLevel0();
  },
  render: function() {
    var optionList = this.state.optionLevel0.map(function(o) {
      return (
        <div className="option-list level-0" data-id={o.id}>
          <div className="title handle-slide-list-container">{o.title}</div>
        </div>
      );
    });
    return (
      {optionList}
    );
  }
});

Answer 1

React 组件应该只返回 render 中的单个根节点，但您当前的实现是返回一个数组。您需要将输出包装在单个节点中，例如 <div>:

render: function() {
  var optionList = this.state.optionLevel0.map(function(o) {
    return (
      <div className="option-list level-0" data-id={o.id}>
        <div className="title handle-slide-list-container">{o.title}</div>
      </div>
    );
  });
  return (
    <div>
      {optionList}
    </div>
  );
}