Question

我正在尝试在没有 JSX

的 ReactJS 中创建此代码

<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

好的，我使用the online Babel compiler来解决问题。放入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 })
    )
  );

使用ReactJS createElement输出不带JSX的HTML

1 个答案: