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 模板中的三元运算符检查这里是否有其他条件。

如果存在 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;

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

1 个答案: