反应格式问题答案

【问题标题】：React formatting issue反应格式问题
【发布时间】：2016-07-02 22:23:42
【问题描述】：

我有以下（不是我写的）：

   render: function () {
        if(this.state.loading){
            return <div><span><i className="fa fa-spinner fa-spin"></i> Loading...</span></div>
        }else if(typeof this.state.listing.id == 'undefined' || !this.state.component){
            return false;
        }
        return (
            React.createElement(eval(this.state.component), {
                listing: this.state.listing,
                onClose: this.handleClose,
                options: this.state.options
            })
        );
    }

这是在 React.creatClass 的内部。我对反应很陌生，但只需要一个包装 div 围绕这部分：

                React.createElement(eval(this.state.component), {
                    listing: this.state.listing,
                    onClose: this.handleClose,
                    options: this.state.options
                })

如何在该部分周围添加一个简单的 div，以便正确设置该组件的样式？

【问题讨论】：

eval(this.state.component) 哇哦，这看起来像一个反模式。

标签： javascript html reactjs render

【解决方案1】：

只需将其包装在另一个 JSX 标记中即可。如果你能摆脱那个流浪的React.createElement 电话并只使用JSX，那将是最好的。

render: function () {
  if(this.state.loading){
    return (
      <div>
        <span>
          <i className="fa fa-spinner fa-spin"></i>
          Loading...
        </span>
      </div>
    );
  } else if(typeof this.state.listing.id == 'undefined' || !this.state.component) {
    return false;
  }
  return (
    <div>
      {React.createElement(eval(this.state.component), {
        listing: this.state.listing,
        onClose: this.handleClose,
        options: this.state.options})
      )}
    </div>
  );
}

真正的问题是，eval 到底在做什么？

【讨论】：