Question

我正在尝试通过回调函数来更改变量，但似乎无法这样做。这是我的react组件：

const MyComponent = () => {
  let scenePinned;

  const sceneCallback = event => {
    if (event && event.state === 'DURING') {
      console.log('Pinned');
      scenePinned = true;
    } else {
      console.log('Not Pinned');
      scenePinned = false;
    }
  };

  console.log(scenePinned);

  return (
    <div>
      <div style={scenePinned ? 'pinned' : 'not pinned'}/>
      {(progress, event) => (
        //Stuff Happens Here 
      ), sceneCallback(event) )}
    </div>

  );
}

我正在使用react-scrollmagic，并且试图将scenePinned变量从false更改为true，然后将场景固定在顶部时再次变回false。固定和未固定的控制台日志记录正确发生，但是我似乎无法更改scenePinned变量。我确信这是我无法理解的非常基本的东西，但是我不明白为什么会这样。任何帮助将不胜感激。

注意：我曾尝试使用状态存储值，但是在滚动时会触发回调，因此在尝试使用状态存储滚动状态时会超过最大深度。

Answer 1

您需要为此使用状态。否则，每次渲染组件时都会重新初始化变量，并且值会丢失。

Answer 2

console.log（scenePinned）;

页面加载时将首次运行

with react我们使用状态句柄动态值。或使用rxjs 或创建自己的对象并在其上设置侦听器。有一些自定义事件

如此状态

state={scenePinned:null}

然后在渲染方法console.log（this.state.scenePinned）内部

Answer 3

可能的解决方案是在父组件中定义一个状态变量，该状态变量会将其作为prop传递给<MyComponent>。
他们将sceneCallback函数移至父组件并将其作为道具传递给<MyComponent>
许多地方都有关于如何定义此类回调的说明。这是一个：（mine ...;）https://stackoverflow.com/a/55555578/5532513

无法使用回调函数更改变量，但控制台日志记录有效

3 个答案: