Question

这可能是令人费解的，所以请耐心等待。我刚刚开始学习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]。此外，应在导航时保存响应。最后，所有结果都应在最终的页面上显示。＆＃34;

我真的很难理解如何在没有路由的情况下通过简单地在组件和容器之间传递道具来做到这一点。

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

具体问题：

如何在＆＃34;导航＆＃34;上显示/隐藏组件没有路线？
结果容器是否应该一直隐藏到最后一步之前的整个时间？
如何设计状态以便我知道步骤N是向导的最后一步，因此需要显示结果容器？

Answer 1

如何在＆＃34;导航＆＃34;上显示/隐藏组件没有路线？

您应该使用所谓的conditional rendering。在您的情况下，组件可以像这样实现而无需路由器：

＆＃13;

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'));

＆＃13;

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

＆＃13;

结果容器应该只是隐藏整个时间直到最后一步到了吗？

同样，遵循条件呈现最佳做法，您可能不想隐藏＆＃39;，而是在满足特定条件时呈现结果容器。在我的示例中，当状态变量step等于null时，将呈现结果容器。

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

您的州设计似乎没问题。您可以通过简单地将this.state.steps.length与this.state.step进行比较来检查您是否已到达最后一步。如果他们是平等的，你就到了最后一步。

在React / Redux中无需路由即可导航组件

1 个答案: