当使用2张不同的幻灯片时，幻灯片过渡组件不起作用

debugcn 发表于 Dev

Aakash Chauhan

当我只使用一张幻灯片时，无论是在screen 1文本上还是在上screen 2，它都可以正常工作。

我的问题是为什么当我使用两个不同的幻灯片时它不起作用？

我想使用两个不同的幻灯片，以便如果用户来回切换，它必须显示一个过渡。

我已经试过了：

    export default function App() {
      const [step, setStep] = useState(1);
      const [slider, setSlider] = useState(false);
    
      const handlenext = () => {
        setStep(2);
        setSlider(true);
      };
    
      const handleprev = () => {
        setStep(1);
        setSlider(true);
      };
      return (
        <div className="App">
          {step === 1 ? (
            <Slide direction="up" in={slider} mountOnEnter unmountOnExit>
              <h1>this is screen 1</h1>
            </Slide>
          ) : (
            <Slide direction="up" in={slider} mountOnEnter unmountOnExit>
               <h1> screen 2</h1>
            </Slider>
          )}
    
          <Button onClick={() => handlenext()}>Next</Button>
          <Button onClick={() => handleprev()}>Previous</Button>
        </div>
      );
    }

和这个：-

export default function App() {
  const [step, setStep] = useState(1);


  
  };
  return (
    <div className="App">
      {step === 1 ? (
        <Slide direction="up" in={true} mountOnEnter unmountOnExit>
          <h1>this is screen 1</h1>
        </Slide>
      ) : (
        <h1> screen 2</h1>
      )}

      <Button onClick={() => setStep(2)}>Next</Button>
      <Button onClick={() => setStep(1)}>Previous</Button>
    </div>
  );
}

请在下面的链接上检查复制。

https://codesandbox.io/s/keen-shockley-oprtk?file=/src/App.js

西拉杰·阿拉姆

过渡在条件渲染中不起作用。

因此，如果将隐藏和显示功能留给组件本身，则过渡将起作用。

只需删除条件渲染并将状态值提供给inSlide组件的prop。

<Slide direction="up" in={step === 1} mountOnEnter unmountOnExit>
        <h1>this is screen 1</h1>
      </Slide>

      <Slide direction="up" in={step === 2} mountOnEnter unmountOnExit>
        <h1> screen 2</h1>
      </Slide>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。