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