초보자를 위한 React Props 전체 가이드

33552 단어 reactjavascriptwebdevprogramming

내용의 테이블



📌 Introduction

📌 React Props

📌 Pro Tips

➡ Reduce JSX Redundancy

➡ Communicate between Parent and Child

➡ Triangular communication between Parent and Components



📌 Thank you



소개

Hello amazing developer 🧑‍💻, before digging into this topic let me give you a small introduction and so instructions. Don't worry it would be quick and crisp.

I am Suchintan Das, a Full Stack Developer currently working over two startups. I have been into web development for past two years.

Connect me on 👉

The whole syntaxes and code are uploaded on this 👉 Repository . 유용하다고 생각되면 저장소에 별표를 표시하여 감사를 표시할 수 있습니다. 감사 !

반응 소품

I know most of you can't wait to know what's there on this amazing blog but let's just take a small breath understand a little bit about React Props



일부 속성이 부모에서 자식으로 전달되는 상속과 매우 유사합니다. 예, 소품의 경우에도 일방통행입니다.

프로 팁

JSX 중복성 줄이기

Yes, you heard it write , you can actually send JSX to your child like any card body, section body or headings . Here's a small example of it.

Parent.jsx


import React from "react";
import Children from "./Children";
import "../../stylesheets/Part1/Parent.css"

const Parent = () => {
  const card = (title) => (
    <div className="card">
      <img
        src="https://i2.wp.com/sleepingshouldbeeasy.com/wp-content/uploads/2019/12/gross-motor-activities-for-1-year-olds-3.jpg"
        alt=""
      />
      <button>{title}</button>
    </div>
  );
  return (
    <>
      <div className="container">
        <h1>Showing childrens</h1>
        <br />
        <div className="cards">
        <Children childcard={card("Child")} />
        </div>
      </div>
    </>
  );
};

export default Parent;

Children.jsx


import React from 'react'

const Children1 = (props) => {
  return (
    props.childcard
  )
}

export default Children1

The card is defined in the parent component and it sent it to child component to use , which reduces the reductant code in the first place taking reusable components to another level.

부모와 자녀 간의 의사 소통

I know most of the people while working over any website comes through a scenario where they want to get changes in parent based on changes on child component. Here's an example, let us take you are building a website with dark and light mode switching and you put the controller on the parent body and the child component section.

여기서 아이디어는 포인터를 사용하는 것입니다!

네, 잘 들었습니다!



우리는 props의 통신이 단방향 프로세스라는 것을 알고 있으므로 props가 전송된 후에는 약간의 변경 사항이 발생하더라도 반환되지 않습니다. 이 문제를 해결하기 위해 상태 포인터를 자식에게 보냅니다. 따라서 값의 변경은 부모와 자식을 함께 조작하는 데 도움이 되는 포인터 주소의 변경을 의미합니다. 예 😉!

다음은 작은 코드 피크입니다.

Parent.jsx


import React, { useState } from "react";
import "../../stylesheets/Part2/Parent.css";
import Children from "./Children";

const Parent = () => {
  const [dark, setdark] = useState(false);

  const tooglemode = () => {
    dark ? setdark(false) : setdark(true);
  };

  const darkmode = (
    <i
      className={
        !dark
          ? "fa-solid fa-moon toogle-active"
          : "fa-solid fa-moon toogle-inactive"
      }
      onClick={tooglemode}
    />
  );

  const lightmode = (
    <i
      className={
        dark
          ? "fa-solid fa-sun toogle-active"
          : "fa-solid fa-sun toogle-inactive"
      }
      onClick={tooglemode}
    />
  );

  return (
    <div className={dark ? "application dark" : "application light"}>
      <div className="buttoncontroller">
        <h1>Website</h1>
        <div className="toogle">
          {darkmode}
          {lightmode}
        </div>
      </div>
      <Children dark tooglemode={tooglemode} />
    </div>
  );
};

export default Parent;


Children.jsx


import React from "react";
import illustrator from "../../assets/images/illustrator.svg";

const Children = ({ dark, tooglemode }) => {
  return (
    <div className="section">
      <img src={illustrator} alt="" />
      <div className="sidebar">
        <h1>Welcome</h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate
          quod cum quibusdam rerum quis repellat consequuntur nesciunt deserunt.
          Voluptates aut eaque sed rerum dolorem alias quia! Quo magni hic odio
          exercitationem ratione.
        </p>
        {dark ? (
          <button
            onClick={tooglemode}
            className="light"
            style={{ border: "2px solid black" }}
          >
            Dark Mode
          </button>
        ) : (
          <button onClick={tooglemode} className="dark">
            Light Mode
          </button>
        )}
      </div>
    </div>
  );
};

export default Children;


그리고 같은 것에 대한 짧은 시연-



부모와 구성 요소 간의 삼각 통신



예, 매우 흥미로운 일이라는 것을 알고 있습니다. 개념은 이전과 동일하게 유지되지만 여기서 유일한 플레이는 조작해야 하는 모든 상태가 부모 구성 요소에서 정의되고 해당 포인터가 모든 자식으로 전송된다는 것입니다. 포인터의 주소에서 변경이 완료되면 모든 구성 요소가 동일한 주소 결과의 데이터에 액세스하여 3개 모두에 전달됩니다.

코드에서 정점을 찍자 -

Parent.jsx


import React, { useState } from "react";
import "../../stylesheets/Part3/Parent.css";
import Children1 from "./Children1";
import Children2 from "./Children2";

const Parent = () => {
  const [show, setshow] = useState(true);
  const [count, setcount] = useState([1]);

  const toogle = () => {
    show ? setshow(false) : setshow(true);
  };

  const maintaincount = (event) => {
    event.target.id === "add"
      ? setcount([...count, count[count.length] + 1])
      : setcount(count.slice(0, -1));
  };

  return (
    <div className="application-container">
      <div className="header">
        <button onClick={maintaincount} id="add">
          Add
        </button>
        <button onClick={maintaincount} id="delete">
          Delete
        </button>
      </div>
      <div className="section-application">
        <Children1 show toogle={toogle} />
        <Children2 count={count} show />
      </div>
    </div>
  );
};

export default Parent;


어린이1.jsx


import React from 'react'

const Children1 = ({toogle}) => {

  return (
    <div className="section1">
        <h1>Control Text Visibility</h1>
        <button onClick={toogle}>Toggle</button>
    </div>
  )
}

export default Children1


Children2.jsx


import React from "react";

const Children2 = (props) => {
  console.log(props.show);
  return (
    <div className="section2">
      {props.show ? (
        props.count.map((ele) => {
          return (
            <div className="section2-application" key={ele}>
              <h1>Sample Text</h1>
              <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure,
                ratione necessitatibus officia asperiores quia quaerat
                aspernatur est dignissimos corrupti ullam qui sapiente dolorum
                aliquid!
              </p>
            </div>
          );
        })
      ) : (
        <div>Activate show to view the list</div>
      )}
    </div>
  );
};

export default Children2;


여기 웹 사이트입니다 -



그리고 같은 내용을 이해하는 데 도움이 되는 짧은 웹사이트 분석입니다.



오늘은 그게 다야. 새로운 것을 배우는 데 정말 도움이 되었기를 바랍니다.

고맙습니다

You have made it till the end of this blog 🤗. More such blogs are on the line .

It would be encouraging if a small comment would be there on the blog. I go through each one of them so do comment 😉.

If you want to get a notification 🔔 when it would be published , don't forget to tap on the follow button ☝.

And at last I want to say 👇

Keep coding #️⃣ , keep rocking 🚀

매우 유연한 용기
Python 및 C++용 Tensor 성능 벤치마크

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage