Javascript 在onClick事件后，React组件未更新

我有一个功能性的react-typescript组件，它接收一个正确触发的点击处理程序，但是，该组件在

点击事件之后不会更新

i、 e:

//由于超出此问题范围的原因，
//该组件应具有功能性
康斯特英雄：React.SFC=（）=>{
//出于未来的原因，这些变量必须留在该组件中
const thor=“isHero”；
const hulk=“isHero”；
函数appendSpan（）{
log（thor==hulk）；
返回雷神===绿巨人？是：否；
}
return
他们都是英雄吗；
};
函数App（）{
返回(
);
}

如果我立即调用该方法，即
，他们都是英雄吗？{appendSpan（）}

被相应地追加，但是，onClick场景的情况并非如此

你能帮我理解我在这里遗漏了什么吗

这里是，因为您的
.appendSpan（）
返回react dom，但它在onClick事件的范围内返回

当你说他们都是英雄吗？{appendSpan（）}

，您实际上是在告诉应用程序将span追加到

标记中

---

但是

onClick={appendSpan}

，您告诉它在哪里追加？你没有告诉我该在哪里追加。因此，它永远不会将其追加到DOM树中

从appendSpan函数返回的内容必须是在render函数中返回的内容的一部分

您可以在应用程序组件上保留状态，并编写一个onClick函数来更改状态。将onClick和状态作为道具传递给英雄组件。根据从道具接收到的状态，决定渲染什么

React不会从类变量“React”，我看到您希望将状态保留在类中。试着找钩子

---

您可以将

英雄

组件改为有状态组件，并在单击或使用时更新状态

为tsx更新

class.Component{
//出于未来的原因，这些变量必须留在该组件中
列兵索尔=“伊舍罗”；
私人绿巨人=“伊舍罗”；
建造师（道具）{
超级（道具）；
此.state={
showButton:false
};
}
附录span（）{
//更新状态以显示按钮
这是我的国家({
showButton：正确
});
}
render（）{
const{showButton}=this.state；
让button=this.thor===this.hulk？是：否；
return（
this.appendSpan（）}>他们都是英雄吗？
{showButton？按钮：“”
）；
}
}
函数App（）{
报税表（
);
}

对状态和道具更改做出反应<代码>附录span既不更新也不更新。您可能希望将回调传递给Heroes组件，以便应用程序可以更新某些内容，并将更新后的内容作为道具传入以进行渲染。我在React land上仍然是绿色的，cld请您提供一个如何解决上述问题的示例？函数返回一个值确定，但它应该如何处理该值？将其插入DOM中的某个位置？您仍然可以为我提供一个如何正确学习和实现此功能的示例吗？对我来说唯一的问题是

const

thor和hulk都需要存在于子组件中。然后如何通过作为道具传递的状态来比较它们与父组件的相等性？你能给我举个例子吗？费雷拉·巴斯托斯·布拉格，非常感谢。阿布拉索堡！宁静，这是一个非常好的回答，它是一个非常好的回答。Valeu mais uma vez非常感谢这个例子。基于类的组件是解决这个问题的唯一方法吗？我能在保持功能组件的同时解决这个问题吗？@NullisTrue onClick必须触发一些东西，或者属性/状态改变。也许可以为

英雄

或

应用程序

使用功能组件，但不能同时使用这两种组件。我想，让我试着在您的沙盒中修补一下。使用钩子可以吗？我只是想知道，但我不确定。@NullisTrue是的，可以用hook，上面更新了答案。非常感谢。今晚你帮了我大忙，教了我很多。这周我有很多东西要学习和工作。我真的很感谢你的时间和帮助！

// for reasons out of the scope of this question, 
// this component should be functional

const Heroes: React.SFC<{}> = () => {
  // for fututre reasons, these variables must leave within this component
  const thor = "isHero";
  const hulk = "isHero";

  function appendSpan() {
    console.log(thor === hulk);
    return thor === hulk ? <span>yes</span> : <span>no</span>;
  }

  return <p onClick={appendSpan}>Are they both heroes?</p>;
};

function App() {
  return (
    <div className="App">
      <Heroes />
    </div>
  );
}