1

这可能很复杂，所以请耐心等待。我刚刚开始学习 React/Redux 和管理状态。我想构建一个不使用路由的小应用程序，如下所示：

在此处输入图像描述

与安装向导不同。

将提示用户在每一页上回答一个问题，然后按一个按钮向前或向后前进。最后，用户将看到他们的答案列表。

我想状态会是这样的：

{
    steps: [
        { prompt: 'Question in step 1', answer: null },
        { prompt: 'Question in step 2', answer: null },
        { prompt: 'Question in step 3', answer: null }
    ],
    currentStepNumber: 0,
    currentStepData: { prompt: 'Question in step 1', answer: null }
}

前进/后退应该增加/减少currentStepNumber，而currentStepData应该显示，比如说steps[0]。此外，应在导航时保存响应。最后，所有结果都应该在最终的“页面”上可见。

我真的很想知道如何通过简单地在组件和容器之间传递道具来做到这一点而无需路由。

上面的状态对象是一种尝试，看起来它可能有效，但我觉得我没有得到它。

具体问题：

  • 如何在没有路线的“导航”时显示/隐藏组件？
  • 是否应该一直隐藏结果容器，直到到达最后一步？
  • 如何设计状态，以便我知道步骤 N 是向导中的最后一步，因此需要显示结果容器？
4

1 回答 1

4

如何在没有路线的“导航”时显示/隐藏组件？

您应该使用所谓的条件渲染。在您的情况下，可以在没有路由器的情况下像这样实现组件：

const Step1 = ({prompt, onNextStep}) => (
  <div>
    <h1>{prompt}</h1>
    <button type="button" className="btn btn-info" onClick={onNextStep}>Next</button>
  </div>
);

const Step2 = ({prompt, onNextStep, onPrevStep}) => (
  <div>
    <h1>{prompt}</h1>
    <button type="button" className="btn btn-info" onClick={onPrevStep}>Prev</button>
    &nbsp;
    <button type="button" className="btn btn-info" onClick={onNextStep}>Next</button>
  </div>
);

const Step3 = ({prompt, onPrevStep, onSubmit}) => (
  <div>
    <h1>{prompt}</h1>
    <button type="button" className="btn btn-info" onClick={onPrevStep}>Prev</button>
    &nbsp;
    <button type="button" className="btn btn-info" onClick={onSubmit}>Submit</button>
  </div>
);

const Results = ({prompt, children, onReset}) => (
  <div>
    <h1>{prompt}</h1>
    {children}
    <button type="button" className="btn btn-info" onClick={onReset}>Reset</button>
  </div>
);


class App extends React.Component {

    state = {
      step: 1,
      steps: [
        {
          prompt: 'Prompt 1',
          answer: ''
        },
        {
          prompt: 'Prompt 2',
          answer: ''
        },
        {
          prompt: 'Prompt 3',
          answer: ''
        },
      ],
    };

    onNextStep = () => this.setState({
      step: this.state.step + 1
    });

    onPrevStep = () => this.setState({
      step: this.state.step - 1
    });

    onSubmit = () => this.setState({
      step: null
    });

    onReset = () => this.setState({
      step: 1
    });

    render() {
      const { step, steps } = this.state;
      const { prompt } = step ? steps[step-1] : '';
      if (step === 1) {
        return (
          <Step1
            prompt={prompt}
            onNextStep={this.onNextStep}
          />
        );
      }
      if (step === 2) {
        return (
          <Step2
            prompt={prompt}
            onNextStep={this.onNextStep}
            onPrevStep={this.onPrevStep}
          />
        );
      }
      if (step === 3) {
        return (
          <Step3
            prompt={prompt}
            onPrevStep={this.onPrevStep}
            onSubmit={this.onSubmit}
          />
        );
      }
      if (step === null) {
        return (
          <Results 
            prompt="These are results" 
            onReset={this.onReset}
          >
            <p>Drop results here as children</p>
          </Results>
        );
      }

    }
}

ReactDOM.render(<App />, document.getElementById('root'));                
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" />

<div id="root"></div>

是否应该一直隐藏结果容器，直到到达最后一步？

同样，遵循条件渲染最佳实践，您可能不想“隐藏”，而是在满足特定条件时渲染结果容器。在我的示例中，结果容器在状态变量step等于时呈现null。

如何设计状态，以便我知道步骤 N 是向导中的最后一步，因此需要显示结果容器？

您的状态设计似乎没问题。this.state.steps.length您可以通过简单地比较来检查您是否到达了最后一步this.state.step。如果它们相等，则您已到达最后一步。

于 2018-05-29T08:43:04.753 回答