如何用ReactJS createElement实现无JSX的指定列表项HTML结构？

没问题，我帮你把这段JSX转换成纯React.createElement的写法，完美适配你用_createClass定义的Photo组件场景。

首先，我们需要用React.createElement逐层嵌套元素，每个元素的props和子元素对应传入参数即可。下面是完整的实现代码，直接放到你的Photo组件的render方法里就行：

render: function() {
  // 解构props让代码更简洁
  const { photo, onClick } = this.props;

  return React.createElement(
    // 外层li标签
    'li',
    null, // li无额外props，传null
    // li的子元素：a标签
    React.createElement(
      'a',
      {
        href: 'javascript:;',
        // 对应JSX里的条件绑定点击事件
        onClick: onClick ? this.handleClick : null
      },
      // a的子元素：背景图div
      React.createElement(
        'div',
        {
          className: 'home-gallery',
          // 对应JSX里的行内样式
          style: { background: `url(${photo})` }
        }
      )
    )
  );
}

关键注意事项： #

• 确保你的组件已经正确引入React（毕竟要用到React.createElement）
• 你的handleClick方法已经在_createClass的methods中定义，比如：

  const Photo = React.createClass({
    methods: {
      handleClick: function() {
        // 这里写你的点击逻辑
      }
    },
    render: function() {
      // 上面的render代码
    }
  });
  

• 确认photo和onClick这两个props已经正确传递给Photo组件

这样写出来的结构和你原来的JSX完全等价，能在不依赖JSX的环境下正常运行～

内容的提问来源于stack exchange，提问作者Darren