根據用戶選擇顯示內容

Question

我正在開發一個基於Yes或No問題的用戶界面，根據用戶選擇，我需要加載特定內容並允許用戶移動到以前選擇的問題。

下面是我需要從中加載問題的數據結構。

  const data = {
    preQuestions: {
      landingPage: {
        heading: 'This is the ladning page',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1A',
          },
          noButton: {
            text: 'No',
            action: '1B',
          },
        },
      },
      '1A': {
        heading: 'This is the 1A Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1C',
          },
          noButton: {
            text: 'No',
            action: '1D',
          },
        },
      },
      '1B': {
        heading: 'This is the 1B Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1E',
          },
          noButton: {
            text: 'No',
            action: '1F',
          },
        },
      },
      '1C': {
        heading: 'This is the 1C Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1G',
          },
          noButton: {
            text: 'No',
            action: '1H',
          },
        },
      },
      '1D': {
        heading: 'This is the 1C Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1I',
          },
          noButton: {
            text: 'No',
            action: '1J',
          },
        },
      },
    },
  };

以下是我提出有關用戶操作問題的邏輯。

  const content = data.preQuestions;

  const loadNextCompnent = (actionId) => {
    console.log(actionId);
    return renderQustionComponent(actionId);
  };

  const renderQustionComponent = (key) => {
    console.log(content[key]);
    return (
      <div id={key}>
        <a href="#">Previous question</a>
        <h1>{content[key].heading}</h1>
        <button
          onClick={() =>
            loadNextCompnent(content[key].buttons.yesButton.action)
          }
        >
          {content[key].buttons.yesButton.text}{' '}
        </button>
        <button
          onClick={() => loadNextCompnent(content[key].buttons.noButton.action)}
        >
          {content[key].buttons.noButton.text}{' '}
        </button>
      </div>
    );
  };

問題是，當用戶單擊yes或no按鈕時，什么也沒有發生。

如何通過平滑滾動轉到上一個問題？

以下是stackblitz鏈接。 請指導我。

https://stackblitz.com/edit/react-ts-eugpwn?file=App.tsx

Answer 1

您好，我已經使用 react-router-dom 創建了以下示例，因此您可以查看以下演示：

https://react-ts-31wshc.stackblitz.io

應用程序.tsx

import * as React from 'react';
import './style.css';
import RenderQuestionComponent from './RenderQuestionComponent';
import Test from './Test';
import Page1 from './Page1';
import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Page1 />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </BrowserRouter>
  );
}

第1頁.tsx

import * as React from 'react';
import { useNavigate } from 'react-router-dom';
export default function Page1() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>THIS IS THE PAGE 1 </h1>
      <button
        onClick={() => {
          navigate('/test'); // you will go one page back
        }}
      >
        GO TO TEST PAGE{' '}
      </button>
    </div>
  );
}

測試.tsx

import * as React from 'react';
import { useNavigate } from 'react-router-dom';
export default function Test() {
  const navigate = useNavigate();
  return (
    <div>
      <h1>TESTING </h1>
      <button
        onClick={() => {
          navigate(-1); // you will go one page back
        }}
      >
        GO BACK{' '}
      </button>
    </div>
  );
}

您可以查看此網站以了解有關react-router-dom 的更多信息：

https://reactrouter.com/en/main - 當前版本6.4.1

Answer 2

您從對象調用鍵的邏輯很好，問題是您沒有足夠的邏輯來更新 dom 並查看更改。 這是我用states更新的工作版本

https://react-ts-z8clfj.stackblitz.io

import * as React from 'react';
import './style.css';

export default function App() {
  const data = {
    preQuestions: {
      landingPage: {
        heading: 'This is the ladning page',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1A',
          },
          noButton: {
            text: 'No',
            action: '1B',
          },
        },
      },
      '1A': {
        heading: 'This is the 1A Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1C',
          },
          noButton: {
            text: 'No',
            action: '1D',
          },
        },
      },
      '1B': {
        heading: 'This is the 1B Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1C',
          },
          noButton: {
            text: 'No',
            action: '1D',
          },
        },
      },
      '1C': {
        heading: 'This is the 1C Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1A',
          },
          noButton: {
            text: 'No',
            action: '1B',
          },
        },
      },
      '1D': {
        heading: 'This is the 1D Component',
        buttons: {
          yesButton: {
            text: 'yes',
            action: '1B',
          },
          noButton: {
            text: 'No',
            action: '1C',
          },
        },
      },
    },
  };

  const [active, setActive] = React.useState<any>(
    data.preQuestions['landingPage']
  );

  const content = data.preQuestions;

  const loadNextCompnent = (actionId) => {
    setActive(actionId);
  };

  const renderQustionComponent = () => {
    console.log('I am active', active);
    return (
      <div>
        <a href="#">Previous question</a>
        <h1>{active?.heading}</h1>
        <button
          onClick={() =>
            loadNextCompnent(content[active?.buttons?.yesButton?.action])
          }
        >
          {active.buttons.yesButton.text}{' '}
        </button>
        <button
          onClick={() =>
            loadNextCompnent(content[active?.buttons?.noButton?.action])
          }
        >
          {active.buttons.noButton.text}{' '}
        </button>
      </div>
    );
  };

  return <div>{renderQustionComponent()}</div>;
}