向组件传递参数（Props）

Passing Props to a Component | React 中文文档 | React 中文网

props 就是用于和其他组件交流，父组件都可以传递信息给子组件，传递的信息内容包含了 objects, arrays, functions. 基本什么都可以传

向组件传递参数（Props）

父组件向子组件传递元素

子组件接受元素

使用JSX的拓展语法去传递props值

将JSX当作子组件传递

How props change over time

父组件向子组件传递元素

export default function Profile() {return (<Avatarperson={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}size={100}/>);
}

子组件接受元素

function Avatar({ person, size }) {// person and size are available here
}

function Avatar(props) {let person = props.person;let size = props.size;// ...
}

后面的写法是我们常规的写法，这种语法被称为“解构”，等价于从函数参数读取属性。

第一种写法可以方便我们设置默认值

function Avatar({ person, size = 100 }) {// ...
}

这种写法的默认值只有在 size={undefined} 的时候可以使用，但是如果是传入size={null} 和 size={0}则默认值不会被使用。

使用JSX的拓展语法去传递props值

有时候传值写法会十分的重复冗余

function Profile({ person, size, isSepia, thickBorder }) {return (<div className="card"><Avatarperson={person}size={size}isSepia={isSepia}thickBorder={thickBorder}/></div>);
}

为了使得代码更加的简洁，可以使用下面的方法进行传值

function Profile(props) {return (<div className="card"><Avatar {...props} /></div>);
}

这种写法最主要是直接传递，因为在第二个function中他并不使用这个值，但是并不能什么都使用这个值，因为有时候你中间修改过prop里的值再传递的话，那么就很容易出问题了，这也是文档中所说的原则：

Use spread syntax with restraint. If you’re using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next!

将JSX当作子组件传递

这个写法倒之前没有遇到过，就是把组件当作值传入，觉得是一种高级的写法

<Card><Avatar />
</Card>

App.js

import Avatar from './Avatar.js';function Card({ children }) {return (<div className="card">{children}</div>);
}export default function Profile() {return (<Card><Avatarsize={100}person={{ name: 'Katsuko Saruhashi',imageId: 'YfeOqp2'}}/></Card>);
}

Avatar.js

import { getImageUrl } from './utils.js';export default function Avatar({ person, size }) {return (<imgclassName="avatar"src={getImageUrl(person)}alt={person.name}width={size}height={size}/>);
}

一开始会有一点confused的，因为这样的写法其实好像和下面的写法好像没什么不同。

    <div className="card"><Avatarperson={person}size={size}isSepia={isSepia}thickBorder={thickBorder}/></div>

最主要是实例的代码给的没有那么的复杂，其实前面的那种写法就是将上面的这个整个函数传递另一个函数去渲染了，也就是我在表皮层不做

<div className="card">

这件事，而是直接使用JSX的写法

<Card><Avatar />
</Card>

这样整个代码看起来就十分的整洁，而这个过程中就相当于将整一个子模块传递到Card函数内，再进行传值渲染（感觉这里表达的不好，大概意思吧）。当然文档说就填洞，你想填什么都行

You can think of a component with a children prop as having a “hole” that can be “filled in” by its parent components with arbitrary JSX. You will often use the children prop for visual wrappers: panels, grids, and so on. You can explore this in more detail in Extracting Layout Components.

How props change over time

这个标题是文档的啦，其实最主要想说一件事就是

props are immutable—a term from computer science meaning “unchangeable.”

也就是说，他自己是永远不会变的，但是如果你希望他变，那么你就需要自己去从父组件更新一个值，他自己才会重新渲染

When a component needs to change its props (for example, in response to a user interaction or new data), it will have to “ask” its parent component to pass it different props—a new object! Its old props will then be cast aside, and eventually the JavaScript engine will reclaim the memory taken by them.

这些基础的原理还是得了解一下得吧，正常情况下我们是不能直接修改props的，即使是父组件也是，因为会很麻烦的，涉及到一些通讯。这个时候就要用到 state了。

【React】Props相关推荐

【react】react18的学习（三）--hooks组件
上一篇:[react]react18的学习(二)-三种组件 1.useState:使函数组件可以使用并修改 state import { useState } from 'react' const [ ...
【react】使用代理解决跨域问题
[react]使用代理解决跨域问题参考文章: (1)[react]使用代理解决跨域问题 (2)https://www.cnblogs.com/guanpingping/p/10344197.html ...
【Vue】—props属性
[Vue]-props属性 <template><div><h2>Parent</h2><Son :da ...
【React】半小时深刻理解《半小时深刻理解React》（老套娃了）
本文是对于腾讯大佬写的半小时深刻理解react这篇文章的总结和笔记文章目录 1.认识JSX 2.虚拟DOM 3.认识react组件实现组件化组装 4.react数据流 props属性和propsT ...
【React】路由详解
文章目录 Router 介绍 Router 原理 Router 安装 Router 使用 Link 和 NavLink Route 属性 path 属性 exact 属性 Route 组件 compo ...
【React】react-infinite-scroll-component 实现滚动加载
react-infinite-scroll-component 实现滚动加载效果 index.tsx import {useState, useEffect} from 'react' import ...
【React】1077- React Fiber架构浅析
1.浏览器渲染为了更好的理解 React Fiber, 我们先简单了解下渲染器进程的内部工作原理. 参考资料: 从内部了解现代浏览器(3)[1] 渲染树构建.布局及绘制[2] 1.1 渲染帧帧 ( ...
【react】createElement实例
import React ,{createElement } from 'react'; import './App.css';function App() {var child1 = React.c ...
【React】React官方文档学习小记
1.setState可能是异步的解决:将一个函数传给setState 2.setState是浅合并 3.jsx的事件必须传入的是函数,而不是字符串, onClick必须是小驼峰写法 onClick= ...

【React】Props

向组件传递参数（Props）

父组件向子组件传递元素

子组件接受元素

使用JSX的拓展语法去传递props值

将JSX当作子组件传递

How props change over time

【React】Props相关推荐

最新文章

热门文章