React条件渲染异常：仅Standard组件可渲染，求正确实现方式

DevOps 小满

2026-5-12

问题分析与解决方案

你的条件渲染逻辑本身是没问题的，但事件处理时获取name属性的方式存在疏漏，导致selectedplan无法被正确赋值，进而无法触发Filled和Premium组件的渲染。

核心问题

当你点击<h3>标签时，e.target指向的是实际被点击的DOM节点：如果点击的是h3内部的文本内容，e.target会是文本节点（而非h3元素本身），而文本节点没有name属性，最终selectedplan会被设置为undefined或空值，自然匹配不到filled或premium的条件分支。

修复方案

把事件处理中的e.target.name替换为e.currentTarget.name：

currentTarget始终指向绑定事件处理函数的元素（也就是你的<h3>标签），无论你点击的是它的子节点还是自身，都能稳定获取到name属性。

同时可以优化一个冗余点：你在constructor中手动绑定了this.onClick，但又用类字段箭头函数定义了onClick——箭头函数已经自动绑定了this，所以可以删掉constructor里的this.onClick = this.onClick.bind(this);，避免重复绑定。

修改后的关键代码片段：

constructor(props) {
  super(props);
  this.state = { selectedplan: "" };
  // 移除这行冗余的绑定代码：this.onClick = this.onClick.bind(this);
}
onClick = e => this.setState({ selectedplan: e.currentTarget.name });