React에서 "더 많이/덜 보기"기능이 있는 코드 목록 항목

내 페이지에 요소 목록을 표시하고 싶고 각 요소에 텍스트를 마음대로 확장 및 축소할 수 있는 "더 많이/덜 표시"기능이 있기를 원합니다.

이를 위해 React를 사용하겠습니다. 다음 더미 API에서 일부 가짜 데이터를 가져옵니다 => https://jsonplaceholder.typicode.com/

이를 위해 axios를 사용하겠습니다.

내 구조에는 App.js, Texts.js 및 Text.js의 세 페이지가 있습니다.

여기에서 저장소를 찾을 수 있습니다 => https://github.com/muratcan-yuksel/reactShowHideBlogPost

App.js에서 데이터를 가져온 다음 Text.js 구성 요소에 도달할 때까지 소품과 함께 보냅니다.

wil을 시작하려면 이것이 내 App.js 파일 =>

앱 구성 요소

//App.js
import { React, useState, useEffect } from "react";
import axios from "axios";
import Texts from "./Texts";

const App = () => {
  const url = "https://jsonplaceholder.typicode.com/posts";
  const [data, setData] = useState([]);

  const getData = async () => {
    try {
      const req = await axios.get(url);
      const res = await req.data;
      setData(res.slice(0, 5));
    } catch (error) {
      console.log(error);
    }
  };

  //useEffect runs once when the component is mounted
  useEffect(() => {
    getData();
  }, []);

  return (
    <main>
      <Texts props={data} />
      {/* <div>
        {data.map((e) => {
          return <div key={e.id}>{e.title}</div>;
        })}
      </div> */}
    </main>
  );
};

export default App;

사용할 후크, axios 및 자식 구성 요소Texts를 가져오는 것으로 시작합니다.

호출할 API 엔드포인트를 정의합니다. 이 링크를 따라 확인할 수 있습니다 => https://jsonplaceholder.typicode.com/posts 사용자 ID, ID, 제목 및 본문을 반환합니다. 텍스트에 body가 필요합니다.

useState 후크는 상태에 데이터를 저장하는 데 사용되며 useEffect 후크는 컴포넌트 마운트 시 getData 함수를 한 번 호출합니다.
getData는 axios 라이브러리를 사용하여 API를 호출하는 비동기 함수입니다. 이 코드 줄setData(res.slice(0, 5));에서는 사용하기 쉽도록 API에서 반환되는 배열 요소의 양을 5로 제한하고 상태를 설정합니다. 많은 항목을 반환하지만 모두 필요하지는 않습니다. 저는 API 호출을 할 때 항상 async/await와 함께 try/catch 구문을 사용합니다. 그것이 내가 아는 최고의 것이며 구문이 더 읽기 쉽습니다.

내 반환 문에서 state에 저장한 데이터를 props 이름props과 함께 Texts 구성 요소로 보냅니다.

Texts 컴포넌트를 확인해 봅시다.

텍스트 구성요소

//Texts.js
import { React, useState } from "react";
import "./styles/texts.css";
import Text from "./Text";

const Texts = ({ props }) => {
  return (
    <div className="textComponent">
      <div>
        {props.map((mappedProps) => {
          return <Text key={mappedProps.id} {...mappedProps} />;
        })}
      </div>
    </div>
  );
};

export default Texts;

관련 종속 항목을 가져온 후 props 키워드를 curly prace에 넣어 소품을 분해하는 것으로 시작합니다. 스타일 신호를 무시하고 github repo에서 css 파일을 확인할 수 있습니다.

부모로부터 받은 데이터를 매핑하고 매핑된 각 요소로 Text 구성 요소를 생성합니다. 이 단계를 건너뛰고 이 구성 요소의 데이터를 매핑하고 표시하려고 하면 모든 요소를 ​​동시에 적용하는 표시/숨기기 논리가 사용됩니다. 즉, 하나의 표시/숨기기 버튼을 클릭하면 다른 모든 항목이 표시되거나 숨겨집니다 동시. 우리는 그것을 원하지 않습니다. 우리는 모든 요소가 개별적으로 표시/숨기기를 원합니다.

다음과 같은 방식{...mappedProps}으로 소품을 보내 하위 구성 요소의 개별 키 제목을 가져오므로 API에서 반환된 항목을 다음과 같이 가져올 수 있습니다 =>

//Text.js
const Text = ({ body, id }) => {
    ...)}

텍스트 구성 요소

//Text.js
import { React, useState } from "react";
import "./styles/texts.css";

const Text = ({ body, id }) => {
  const [readMore, setReadMore] = useState(false);

  return (
    <div>
      <div className="text" key={id}>
        {readMore ? body : `${body.substring(0, 80)}...`}
        <button className="btn" onClick={() => setReadMore(!readMore)}>
          {readMore ? "show less" : "  read more"}
        </button>
      </div>
    </div>
  );
};

export default Text;

저는 so => ​​const Text = ({ body, id }) => { 와 같이 API에 주어진 키 이름을 가진 소품을 가져오는 것으로 시작합니다. 이렇게 하면 제 생각에 혼란의 여지가 줄어듭니다. 내가 찾는 건 body라는 걸 알아. 나는 각 개별 div에 id를 부여한 다음 줄을 사용합니다.

   {readMore ? body : `${body.substring(0, 80)}...`}

나는 readMore 상태 변수가 참인지 먼저 확인하도록 브라우저에 지시합니다. 그렇다면 body에서 오는 전체 테스트를 표시합니다. false이면 텍스트의 처음 80자만 표시합니다. 처음에 readMore 상태 변수가 false로 설정되어 있기 때문에 페이지를 열면 단축된 텍스트가 표시됩니다. 단축 텍스트 뒤에 세 개의 점이 있습니다. 그런 다음 다음 스니펫이 있는 버튼을 넣습니다 =>

    <button className="btn" onClick={() => setReadMore(!readMore)}>
     {readMore ? "show less" : "  read more"}
    </button>

이는 readMore 상태 변수를 그 반대로 설정합니다. 버튼 안에는 readMore 상태 변수가 true 인 경우 "더 적게 표시"를 표시하고 false인 경우 "더 읽기"를 표시하는 텍스트가 있습니다. 이렇게 하면 버튼을 클릭하여 텍스트를 확대하거나 축소할 수 있습니다.

그게 다야.

즐거운 코딩하세요!