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

How do I show only one at a time?

鉴于您想要在它们之间进行幻灯片转换，您至少需要留下一个和下一个在切换时显示在 DOM 中。当不切换时，DOM 中可能只有当前的一个。但最简单的可能是始终将所有这些都放在 DOM 中，只是前一个/下一个位于视口(viewport)的左侧/右侧。

因此，要回答如何一次只显示一个的问题，一种方法是翻译所有“旧”的容器宽度的 100%，保留当前的，然后翻译所有“下一个” 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 hidden 的下一张/上一张幻灯片。查找 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}>
          ...

How can I include a slide left transition/animation when each slide hides/shows?

有了上面的样式，可能就像为每张幻灯片设置以下样式一样简单:

transition: transform 0.5s;