使用ReactJS createElement输出不带JSX的createElement

Question

我试图在ReactJS中创建这段没有JSX的代码。

<li>
  <a href="javascript:;" onClick={onClick ? this.handleClick : null}>
    <div className="home-gallery" style={{background: `url(${photo})`}}/>
  </a>
</li>

原因是改变了组件中以前的代码，而这些代码并不完全符合我的需要。我读了一些其他的帖子，但它远没有起作用。

_createClass(Photo, [{
 key: 'handleClick',
  value: function handleClick(event) {
   var _props = this.props,
      onClick = _props.onClick,
        index = _props.index,
        photo = _props.photo;

      onClick(event, { photo: photo, index: index });
  }
}, {
    key: 'render',
    value: function render() {
      var _props2 = this.props,
            photo = _props2.photo,
          onClick = _props2.onClick,
           margin = _props2.margin;

      var imgStyle = { background: `url(${photo})`, margin: margin };
      return 

      _react2.default.createElement('li', null,
        _react2.default.createElement('a', _extends({
          onClick: onClick ? this.handleClick : null
        },
          _react2.default.createElement('div', _extends({
            style: onClick ? _extends({}, imgStyle, imgWithClick) : imgStyle
          }))
        ))
      )
  }}]);

有人能指点我解决这个问题的方向吗?或者告诉我如何最好地了解我做错了什么。

更新

我还没有计算出我的大部分查询修改到，但background: 'url(${photo})'仍然没有产生，而边际是。

var imgStyle = { background: `url(${photo})`, margin: margin };

      return _react2.default.createElement(
        "li",
        null,
        _react2.default.createElement(
          "a",
          { href: "javascript:;", onClick: onClick ? this.handleClick : null },
          _react2.default.createElement("div", { className: "home-gallery", style: onClick ? _extends({}, imgStyle) : imgStyle })
        )
      );

Answer 1

好的，我是用在线Babel编译器来解决这个问题的。加入JSX提供了一个输出，引导我找到解决方案。

var imgStyle = { backgroundImage: 'url(' + photo.src + ')', margin: margin };
  console.log(photo)
  return _react2.default.createElement(
    "li",
    null,
    _react2.default.createElement(
      "a",
      { href: "javascript:;", onClick: onClick ? this.handleClick : null },
      _react2.default.createElement("div", { className: "home-gallery", style: onClick ? _extends({}, imgStyle) : imgStyle })
    )
  );