React Props 完全入门指南
目录
📌简介
📌专业提示
📌谢谢
介绍
你好，优秀的开发者🧑💻，在深入探讨这个话题之前，让我先给你做一个简短的介绍和一些说明。别担心，内容会简洁明了。
我是Suchintan Das，一名全栈开发人员，目前在两家创业公司工作。我从事Web开发已有两年。
在领英上联系我 👉
完整的语法和代码都已上传到这个 👉仓库。如果您觉得有用，可以给仓库点个星标以示支持。谢谢！
React Props
我知道你们大多数人都迫不及待地想知道这个精彩博客里有什么内容，但我们先深呼吸一下，稍微了解一下React Props。
这与继承非常相似，继承是指将某些属性从父组件传递给子组件。是的，对于 props 来说，这也是一种单向传递。
专业提示
减少JSX冗余
是的，你没听错，你可以像发送卡片主体、章节主体或标题一样，将JSX 代码发送给你的子元素。这里有一个简单的例子。
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
该卡片在父组件中定义，并发送给子组件使用，这首先减少了可重用组件的代码量，从而将可重用组件提升到了一个新的水平。
父母与孩子之间的沟通
我知道大多数人在开发网站时都会遇到这样的情况：他们希望根据子组件的变化来调整父组件。举个例子，假设你正在开发一个带有深色和浅色模式切换功能的网站，并且你将控制器放在了父组件的 body 和子组件 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;
接下来是一段简短的演示——
父组件之间的三角通信
我知道这非常令人兴奋。虽然概念与之前相同，但区别在于所有需要操作的状态都将在父组件中定义，并将指向这些状态的指针传递给所有子组件。当指针的地址发生变化时，所有子组件都会访问同一个地址的数据，并将结果传递给所有三个子组件。
让我们仔细看看代码——
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;
Children1.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;
这是网站地址——
以及一份简短的网站介绍，以帮助您理解。
今天就到这里。希望这些内容真的对你学习新知识有所帮助。
谢谢
你已经读到这篇博客的最后了🤗。更多类似的博客即将推出。
如果能在博客上留下简短的评论，我会非常感激。我会认真阅读每一条评论，所以请多多留言哦😉。
如果你想在发布时收到通知🔔，别忘了点击关注按钮☝。
最后我想说👇
继续编码 #️⃣，继续摇滚🚀
文章来源：https://dev.to/suchintan/use-react-props-like-a-pro--1gll