javascript - ReactJS变量变化不是渲染元素

Question

我的情况相当简单(我正在将 ReactJS 与 A-Frame/A-Frame React 结合使用，但这不会真正影响这里的任何内容)。

我有一个实体，提示用户可以单击/滑动对象。我希望该实体在用户单击该对象后消失，然后在 10 秒后重新出现。

我对 React 还比较陌生，所以可能在这里做错了什么:

1. 在 JS 文件的顶部(在导入之后，但在 class 开始之前，我正在执行 let showHinter = true;

2. 我的 render() 方法中有一个实体，如下所示:

   <AFrameEntity
       events={{
         click: (ev) => {
   
           showHinter = false;
   
           setTimeout(() => {
             console.log("showHinter Value:", showHinter)
   
             /* ↑ This fires, but ↓ this doesn't do anything */
   
             showHinter = true;
             console.log("showHinter Value:", showHinter)
           }, 5000)
   
         }
       }}
     >
     </AFrameEntity>
   

3. 我的“hinter”组件是它的兄弟组件，如下所示:

   {
   
     <AFrameEntity /* Bunch of irrelevant stuff here */ >
   
       // fade out
       {
        !showHinter && 
         <a-animation 
           attribute="material.opacity"
           dur="1000"
           fill="forwards"
           from="1"
           to="0"
           repeat="0"></a-animation>
       }
         //fade in
       {
        showHinter && 
         <a-animation 
           attribute="material.opacity"
           dur="1000"
           fill="forwards"
           from="0"
           to="1"
           repeat="0"></a-animation>
       }
     </AFrameEntity>
   }
   

单击时，showHinter 正确设置为 false 并且元素消失。然而，它再也没有出现。我的控制台记录 do 发生，并且 showHinter === false，但我的淡入动画从未发生，并且使用 React 的 devtools 检查元素会显示我的淡出动画实体，而不是我的淡入淡入(应该在 showHinter === true 时触发。

所以基本问题是，为什么 React 不对我的变量变化使用react？我需要强制它以某种方式重新渲染吗？

Answer 1

您应该通过状态进行每一项影响 View 或您期望重新渲染的更改。

在您的情况下，您会执行类似的操作(未测试):

<AFrameEntity
events={{
  click: (ev) => {

    this.setState({showHinter: false)};

    setTimeout(() => {
      console.log("showHinter Value:", this.state.showHinter)

      /* ↑ This fires, but ↓ this doesn't do anything */

      this.setState({showHinter: true)};
      console.log("showHinter Value:", this.state.showHinter)
    }, 5000)

  }
}}

并检查渲染函数中的状态。

{

  <AFrameEntity /* Bunch of irrelevant stuff here */ >

    // fade out
    {
     !this.state.showHinter && 
      <a-animation 
        attribute="material.opacity"
        dur="1000"
        fill="forwards"
        from="1"
        to="0"
        repeat="0"></a-animation>
    }
      //fade in
    {
     this.state.showHinter && 
      <a-animation 
        attribute="material.opacity"
        dur="1000"
        fill="forwards"
        from="0"
        to="1"
        repeat="0"></a-animation>
    }
  </AFrameEntity>
}