反应状态按钮或创建后退按钮？

Question

我不是开发人员，目前已被屏蔽。我正在尝试创建一个“回家”按钮或隐藏此重新启动按钮并仅在用户到达最后一个视图时将其显示给用户。我找不到解决办法...

提前感谢您的帮助。

import React, { useState } from 'react';
import './App.css';
import { SelectSign } from './components/SelectSign';
import { SelectTimeframe } from './components/SelectTimeframe';
import { Horoscope } from './components/Horoscope';

function App() {
  const [selectedSign, setSelectedSign] = useState(null);
  const [
    selectedTimeframe,
    setSelectedTimeframe,
  ] = useState('today');

  const restart = () => {
    setSelectedSign(null);
    setSelectedTimeframe('today');
  };

  return (
    <div className="App">
      <h1>The Horoscope App</h1>
      {!selectedSign && (
        <SelectSign onSignSelected={setSelectedSign} />
      )}
      {selectedSign && !selectedTimeframe && (
        <SelectTimeframe
          onTimeframeSelected={setSelectedTimeframe}
        />
      )}
      {selectedSign && selectedTimeframe && (
        <Horoscope
          sign={selectedSign}
          timeframe={selectedTimeframe}
        />
      )}
      <button onClick={restart}>Restart</button>
    </div>
  );
}

export default App;

Answer 1

当点击selectSign 按钮时，您正在设置selectedSign 中的值。 您可以在 JSX 模板中使用三元运算符检查 if else 条件。

如果存在 selectedSign 值，则显示 GO home 按钮，否则将显示 Restart 按钮。

function App() {
  const [selectedSign, setSelectedSign] = useState(null);
  const [
    selectedTimeframe,
    setSelectedTimeframe,
  ] = useState('today');

  const restart = () => {
    setSelectedSign(null);
    setSelectedTimeframe('today');
  };

  return (
    <div className="App">
      <h1>The Horoscope App</h1>
      {!selectedSign && (
        <SelectSign onSignSelected={setSelectedSign} />
      )}
      {selectedSign && !selectedTimeframe && (
        <SelectTimeframe
          onTimeframeSelected={setSelectedTimeframe}
        />
      )}
      {selectedSign && selectedTimeframe && (
        <Horoscope
          sign={selectedSign}
          timeframe={selectedTimeframe}
        />
      )}
      {
       selectedSign?<button>Go Home</button>:<button onClick={restart}>Restart</button>
      }
    </div>
  );
}

export default App;