React states按钮还是create back按钮？

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;

​