Блог

Когда я использую только один слайд, либо для 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

Переходы не работают при условном рендеринге.

Поэтому, если вы оставите функцию скрытия и отображения для самого компонента, переход будет работать.

Просто удалите условный рендеринг и присвоите значения состояния in реквизиту компонента слайда.

 <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>