在React中隱藏和顯示循環組件

Question

對於我正在建立的注冊流程，我有一系列問題。 目前，我正在遍歷每個組件並將它們全部顯示在一頁上。 我的問題是， 如何一次只顯示一個？ 當每張幻燈片隱藏/顯示時，如何包含幻燈片的左過渡/動畫？ 我希望每個問題單獨顯示，然后在用戶單擊下一步時，它隱藏第一個問題並顯示第二個問題。 我對React較新，所以如果這是一個基本問題，我深表歉意，但我無法弄清楚。

以下是我的代碼摘要：

import React from 'react';
import Q1Name from './questions/Q1Name';
import Q2Birthday from './questions/Q2Birthday';
import Q3City from './questions/Q3City';
import Q4YouReady from './questions/Q4YouReady';
import Q5Setting from './questions/Q5Setting';
import Q6Length from './questions/Q6Length';
import Q7Email from './questions/Q7Email';


class SignUpPage extends React.Component {
    render() {
        const components = [Q1Name, Q2Birthday, Q3City, Q5Setting, Q6Length, Q7Email];
        const componentsToRender = components.map((Component, i) => (
            <Component key={i} />
        ));

        return (
            <div className = "container-fluid">
                <div className = "question-box">
                    {componentsToRender}
                </div>
            </div>
        );
    }
}

export default SignUpPage;

這是一個示例組件-它們都稍有不同，因此我展示了兩種主要類型：

第一個只有一個“下一個按鈕”

import React from 'react';

class Q2Birthday extends React.Component {
    render() {
        return (
            <div className="questions">
                <h1 id="question-h1">When is your birthday?</h1>
                <form>
                    <div className="form-group">
                        <input type="date" className="form-control custom-form" id="birthdayInput" aria-describedby="birthday" placeholder="" />
                    </div>
                    <button type="submit" className="btn btn-custom btn-lg">Next Question!</button>
                </form>
            </div>
        );
    }
}

export default Q2Birthday;

第二個具有3個按鈕選項，用戶可以從中選擇

import React from 'react';

class Q6Length extends React.Component {
    render() {
        return (
            <div className="questions">
                <h1 id="question-h1">How long would you like your trip to be?</h1>
                    <button type="submit" className="btn btn-custom-select btn-lg">Just a weekend!</button>
                    <button type="submit" className="btn btn-custom-select btn-lg">A full week!</button>
                    <button type="submit" className="btn btn-custom-select btn-lg">I'm flexible!</button>
            </div>
        );
    }
}

export default Q6Length;

我還想為問題框類中的“問題” div添加一個向左滑動的過渡。 我一直在閱讀react-transition-group，但對如何實現它有些困惑。 另外，在此應用程序中，我不需要存儲表單數據的值。

Answer 1

如何一次只顯示一個？

假設您要在它們之間進行幻燈片過渡，則至少需要一個留在后面，下一個要顯示在切換時位於DOM中。 不切換時，DOM中可能只有當前一個。 但是最簡單的方法可能是始終將所有元素都放在DOM中，而將上一個/下一個元素放在視口的左側/右側。

因此，要回答一次僅顯示一個的問題，一種方法是轉換所有“舊的”容器寬度的100％，保留當前的“ be”，然后將所有的“下一個”容器右移。 100％。

樣式可能如下所示：

const oldStyle = {
  position: 'absolute',
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
  transform: 'translate(-100%)',
};
const currentStyle = {
  position: 'relative',
  transform: 'translate(0)',
};
const nextStyle = {
  position: 'absolute',
  left: 0,
  top: 0,
  width: '100%',
  height: '100%',
  transform: 'translate(100%)',
};

根據頁面上的位置，您可能需要一些其他樣式來隱藏下一張/上一張幻燈片。 查找overflow屬性。 您可能還需要固定容器的高度或寬度-如果發現非當前幻燈片的高度或寬度意外（例如為零），請進行檢查。

要將適當的樣式應用於每個面板，您需要知道哪個是哪個。

我建議在父組件的狀態下跟蹤當前幻燈片索引。 說你在this.state.currentSlide有這個。 這樣，您可以選擇像這樣的幻燈片樣式：

const componentsToRender = components.map((Component, i) => (
  <Component key={i} style={i < this.state.currentSlide ? oldStyle : i === this.state.currentSlide ? currentStyle : nextStyle} />
));

為了使該style道具能夠傳遞到幻燈片，您需要對幻燈片進行一些調整。 最簡單的方法就是顯式地將其傳遞給：

<div className="questions" style={this.props.style}>

但是，我們如何設置當前幻燈片的狀態並保持最新狀態？ 好吧，在最簡單的情況下，您需要將其初始化為零。 您的幻燈片組件需要在完成時告訴父母。 您需要注意這一點，並更新狀態。

class SignUpPage extends React.Component {
  constructor(props) {
    super(props);

    // Set initial state
    this.state = {
      currentSlide: 0,
    };
  }

  // Handle notification from a child slide that we should move to the next
  nextSlide() {
    this.setState({
      currentSlide: this.state.currentSlide + 1,
    });
  }

  render() {
    ...
    const componentsToRender = components.map((Component, i) => (
      <Component key={i} style={this.props.style} onNext={this.nextSlide.bind(this)} />
    ));

然后，子組件需要調用此方法，該方法將在完成時傳遞：

class Q2Birthday extends React.Component {
  handleSubmit(event) {
    // Don't perform an actual form submission
    event.preventDefault();

    // Notify the parent
    this.props.onNext();
  }

  render() {
    return (
      <div className="questions" style={this.props.style}>
        <h1 id="question-h1">When is your birthday?</h1>
        <form onSubmit={this.handleSubmit}>
          ...

當每張幻燈片隱藏/顯示時，如何包含幻燈片的左過渡/動畫？

使用上述樣式，可能就像為每張幻燈片設置以下樣式一樣簡單：

transition: transform 0.5s;