根据 React 文档（webarchive 源）：

国家应该怎么办？

状态应包含组件的事件处理程序可能会更改以触发 UI 更新的数据。在实际应用中，这些数据往往非常小且可通过 JSON 序列化。在构建有状态组件时，请考虑其状态的最小可能表示，并且仅将这些属性存储在this.state. 在里面render()简单地根据这个状态计算你需要的任何其他信息。你会发现以这种方式思考和编写应用程序往往会导致最正确的应用程序，因为向状态添加冗余或计算值意味着你需要明确地保持它们同步，而不是依赖 React 为你计算它们。

什么不应该进入状态？

this.state应该只包含表示 UI 状态所需的最少量数据。因此，它不应包含：

• 计算数据：不要担心基于状态的预计算值——如果您在render(). 例如，如果您在 state 中有一个列表项数组，并且您想将计数呈现为字符串，只需this.state.listItems.length + ' list items'在您的render() 方法中呈现而不是将其存储在 state 中。
• React 组件：render()基于底层的 props 和 state构建它们。
• 来自props的重复数据：尽可能使用props作为真相的来源。将 props 存储在 state 中的一个有效用途是能够知道其先前的值，因为 props 可以随时间变化。

在您的情况下，将您的 html 移动到您的渲染功能中。然后在您的状态中存储一个条件或数据，用于触发将另一个 div 添加到您的 html 中，方法是通过有条件地呈现一些 html 或基于向您的状态添加更多数据将另一个 div 添加到 .map 函数内的数组.

例子：

Class Example render React.Component{
  state = {
    comments: [
      { message:"comment 1", id: 1, timeStamp: "" },
      { message:"comment 2", id: 2, timeStamp: "" },
      { message:"comment 3", id: 3, timeStamp: "" }
    ]
  }

  componentDidMount = () => {
    //update data from api...
    .then(data => this.setState({ comments: data }))
  }

  render(){
    conversation.map(element => {
      if (element.id === this.props.id) {
        return(
          <div className="row msg_container base_sent">
            <div className="col-md-10 col-xs-10">
              <div className="messages msg_sent">
                <p>{element.message}</p>
              </div>
            </div>
          </div>
        )
      }
      else {
        return(
          <div className="row msg_container base_receive">
            <div className="col-md-10 col-xs-10">
              <div className="messages msg_receive">
                <p>{element.message}</p>
              </div>
            </div>
          </div>
        )
      }
    })
  }
}

我认为将 jsx 组件存储在组件的状态中不是一个好主意。我认为您应该只将数据保存在呈现组件所需的状态中。

如果你真的想在 state 中存储 jsx，你为什么不将你的 'conversation' 属性定义为数组？然后您就可以向其中添加新组件。

this.setState({
  conversation: [
        (<div>first</div)
  ]      
});

const currentConversation = state.conversation;
currentConversation.push((<div>new div</div>));
this.setState({conversation: currentConversation})

但最好只存储数据，即 'first' 和 'new div'