ボタンをクリックして目的の構成部品をレンダリング

コンポーネントをレンダーするにはReactボタンをクリックします

実装画面

必要な構成部品をレンダリングするには、buttonをクリックします.
現在はボタンが使用されていますが、checkbox、radio、selectのどちらでも使用できる方法です.

インプリメンテーション

何かを実施するとき、まず考えなければならないのは論理だと思います.

ボタン

をクリック

ボタンの状態値

を保存する.

のステータス値で要素

をレンダーする.
今大きく分かれていれば、このように見ることができます.

1.ステータスの作成

クリックしたボタンの値nameをstateに保存します.
value、innerTextなどのコンテキストであってもよい.

const [content, setContent] = useState();

const buttonValueSetting = e => {
    const { name } = e.target;
    setContent(name);
};

2.オブジェクトの作成

オブジェクトのキーは、レンダリングする構成部品としてボタンのname値と同じです.

const selectComponent = {
    first: <First />,
    second: <Second />,
    third: <Third />,
    fourth: <Fourth />,
    fifth: <Fifth />,
  };

3.onClickイベントの付与

重複レイアウトはmap関数を使用してコード量を減らすことができます.

<Container>
  {MAIN_DATA.map(data => {
  return (
  <Button
    onClick={buttonValueSetting}
    name={data.name}
    key={data.id}>
	{data.text}
  </Button>
    );
  })}
</Container>

4.光学的フィルタリング、オブジェクトのキー変数の処理

state値の後に&&と書き、divは[state]にオブジェクトとキーを囲む.

{content && <div>{selectComponent[content]}</div>}

content && <Content>...</Content>とは
content trueの場合、<Content>がレンダリングされます.
現在のcontentはstate値、初期値は()空、falsey値です.
空白の画面が表示されます

ボタンをクリックすると、onClickイベント

がトリガーされます.

buttonValue Settingsイベントが発生した場合、ステータス値はnameとして保存されます

コンテンツはname値で埋め込まれ、真の値&&で

が実行されます.

オブジェクトが[content]で変数を処理するとこうなります.

selectComponent.first // <First />
selectComponent.second // <Second />
selectComponent.third // <Third />
.
.
1번채 버튼 클릭시
<div><First /></div>

完全なコード

import React, { useState } from 'react';
import styled from 'styled-components';
import { MAIN_DATA } from './MainData';
import Fifth from './Number/Fifth';
import First from './Number/First';
import Fourth from './Number/Fourth';
import Second from './Number/Second';
import Third from './Number/Third';

const Main = () => {
  const [content, setContent] = useState();

  const buttonValueSetting = e => {
    const { name } = e.target;
    setContent(name);
  };

  const selectComponent = {
    first: <First />,
    second: <Second />,
    third: <Third />,
    fourth: <Fourth />,
    fifth: <Fifth />,
  };

  console.log(content);

  return (
    <div>
      <Container>
        {MAIN_DATA.map(data => {
          return (
            <Button onClick={buttonValueSetting} name={data.name} key={data.id}>
              {data.text}
            </Button>
          );
        })}
      </Container>
      {content && <Content>{selectComponent[content]}</Content>}
    </div>
  );
};

export default Main;

const Container = styled.div`
  ${props => props.theme.flex('center', 'center')}
  height: 20vh;
`;

const Button = styled.button`
  padding: 1rem 2rem;
  margin-right: 1rem;
  color: #111111;
  background-color: #eeeeee;
  border-radius: 2rem;
`;

const Content = styled.div`
  ${props => props.theme.flex('center', 'center')}
  width: 100%;
  height: 100%;
`;