Javascript 组件重新加载时，构造函数中创建的元素未更新

为什么当我在构造函数中选择另一种风格时，它没有被更新？另一个选择以及文本将被更新

类构造函数组件扩展了React.Component{ 建造师{ 超级的 此.state={ 冰淇淋：“香草”， }; 此项。选择= 巧克力 香草 草莓 ; } onChange=事件=>{ 这是我的国家{ 冰淇淋：event.target.value， }; }; 渲染{ 回来 冰淇淋口味：{this.state.Icecream} {this.select} 巧克力 香草 草莓 ; } } ReactDOM.render , document.getElementById'container' ;

---

第一个选择不起作用，因为它在构造函数中只渲染过一次。第二个选择有效，因为每次应用程序状态更新时都会重新呈现它

如果有帮助的话，不要将JSX元素视为实际HTML元素的实例。可以将它们看作是一种简单的方法，可以让你的应用程序看起来与你的状态相关。如果我的状态是a，那么我用a呈现一个select，如果我的状态是b，那么我用b呈现一个select，依此类推。

因为当您在构造函数中定义this.select时，您第一次选择中的this.state.icecream仅解释一次。因此，当您的ConstructorComponent在其状态更改时再次重新运行时，在第一次选择中没有任何内容可更新

您需要定义它。选择作为返回的函数，如下所示：

this.select = () => {
  return (
    <select
      value={this.state.icecream}
      onChange={this.onChange}
    >
      <option value="chocolate">Chocolate</option>
      <option value="vanilla">Vanilla</option>
      <option value="strawberry">Strawberry</option>
    </select>
  )
}

---

执行此操作时，您不需要将this.select定义为构造函数中的函数。

页面上的第一个选择框仅在构造函数中呈现，该构造函数只调用一次，因此组件将始终与第一次呈现时保持相同。换句话说，它是静态的。第二个选择框将在每次更新组件时重新渲染

为了修复代码，您可以将构造函数中的行更改为函数：

this.select = () => (
  <select
    value={this.state.icecream}
    onChange={this.onChange}
  >
    <option value="chocolate">Chocolate</option>
    <option value="vanilla">Vanilla</option>
    <option value="strawberry">Strawberry</option>
  </select>
);

<br />
  {this.select()}
<br />

然后更改return语句以调用此函数：

this.select = () => (
  <select
    value={this.state.icecream}
    onChange={this.onChange}
  >
    <option value="chocolate">Chocolate</option>
    <option value="vanilla">Vanilla</option>
    <option value="strawberry">Strawberry</option>
  </select>
);

<br />
  {this.select()}
<br />

---

因此，明显的后续问题；如何重新渲染我能想到的最明显的方法是使它成为一个返回JSX的函数，然后在render中调用该函数。尽管在这里，在render中编写JSX可能是最简单的，就像您在第二个中所做的那样。我想你不能这么做是有原因的吧？