如何在React.Component.render()中嵌入局部JSX块避免代码重复

你的核心思路是完全可行的，只是存在一个JSX基础语法的小疏漏：JSX中嵌入自定义变量时，必须用{}包裹才能让React识别为表达式，否则会被当成纯文本直接输出。

你不需要像你提到的方案那样拆分两个返回分支重复写<input>，只需要修正嵌入变量的语法即可，完整实现如下：

showWarning() {
  if (this.state.warning) {
    return <h2>Warning ! Please hide this thing by clicking below</h2>
  }
  // 状态为false时直接返回null，React会自动跳过该节点不渲染
  return null
}

render() {
  const warningBlock = this.showWarning()
  return (
    <>
      {/* 用花括号嵌入抽离的警告JSX块 */}
      {warningBlock}
      <input
        type="submit"
        value={this.state.warning ? "Hide" : "Show"}
        onClick={this.toggleWarn}
      />
    </>
  );
}

关键说明 #

• 这种写法完全保留了公共<input>元素的单份定义，后续修改按钮属性、事件、样式时只需要维护一处，彻底避免代码重复。
• showWarning方法返回null的逻辑是React官方推荐的条件渲染写法，框架本身会自动过滤null、undefined、布尔值这类无效渲染节点，不需要额外做兼容判断。
• 如果警告块的内容比较简单，也可以直接在JSX内嵌逻辑运算符替代抽方法的写法，比如直接写{this.state.warning && <h2>Warning ! Please hide this thing by clicking below</h2>}，和抽方法的效果完全等价；抽成独立方法的写法更适合警告块逻辑复杂、内容较多的场景，代码可读性更强。

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