React JS点击创建/渲染新元素报错求助

你的代码存在几个关键问题，导致报错：

1. ReactDOM导入错误：ReactDOM并不在react包中，React 18+需要从react-dom/client导入，旧版本从react-dom导入，你的写法会导致找不到ReactDOM。
2. 在render方法内调用ReactDOM.render：组件的render方法是用来返回当前组件要渲染的JSX内容，此时div#box还未被挂载到DOM中，document.getElementById('box')会返回null，调用ReactDOM.render时传入null容器会直接报错。而且这种操作完全违背了React的状态驱动渲染逻辑。
3. 缺少点击触发逻辑：你提到要“通过点击创建新元素”，但当前代码没有任何点击事件绑定。

正确实现方式（基于状态驱动） #

React的核心是状态驱动UI，我们可以通过组件状态来控制要渲染的元素列表，点击按钮时向状态数组中添加新元素，组件会自动重新渲染并展示新元素。

完整代码示例 #

import React from 'react'

export default class Create extends React.Component {
  // 初始化状态，存储要渲染的元素列表
  state = {
    elements: []
  }

  // 点击添加新元素的方法
  addNewElement = () => {
    // 更新状态，向数组中添加新的元素内容（这里用当前时间作为唯一标识）
    this.setState(prevState => ({
      elements: [...prevState.elements, `新元素 ${Date.now()}`]
    }))
  }

  render() {
    return (
      <>
        {/* 点击按钮触发添加逻辑 */}
        <button onClick={this.addNewElement}>点击创建新元素</button>
        {/* 渲染状态中的所有元素 */}
        <div id='box'>
          {this.state.elements.map((text, index) => (
            <h1 key={index}>{text}</h1>
          ))}
        </div>
      </>
    )
  }
}

代码说明 #

• 状态管理：用state.elements数组存储所有要展示的元素，每次点击按钮就向数组中追加新内容。
• 渲染列表：在render中通过map遍历状态数组，将每个元素渲染为<h1>标签，注意要给每个列表项加唯一的key属性（这里用索引，实际项目中建议用唯一ID）。
• 事件绑定：通过onClick绑定addNewElement方法，点击按钮时更新状态，触发组件重新渲染。

如果只是想在box中固定渲染h1（无点击逻辑） #

如果只是想在div#box中渲染<h1>Hello</h1>，不需要调用ReactDOM.render，直接在JSX中嵌套即可：

import React from 'react'

export default class Create extends React.Component {
  render() {
    return (
      <>
        <div id='box'>
          <h1>Hello</h1>
        </div>
      </>
    )
  }
}

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