render函数中的返回变量

Question

如何在react组件渲染函数中返回变量，

我尝试输出列表，并且在循环期间必须在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>
  );
}