时间戳

首页 > 解决方案 > 使用 2 张不同的幻灯片时，幻灯片过渡组件不起作用

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

问题描述

当我只使用一张幻灯片时，无论是在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

标签： reactjsmaterial-uinext.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>

推荐阅读