React中props使用介绍
更新时间：2022年12月21日 11:55:39 作者：神也佑我YK
props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用
1.继续深入state
state有两种用法：
setState({}) 和 setState(()=>{})
第一种用法本质是：我写了这个属性，然后进行覆盖操作。
第二种用法好处是：回调函数中的第一个参数是state。这样的话看起来获取到原先state上的数据也更加简单！
setState修改数据实现响应式的本质
在每次修改之后，会重新调用render函数。
2.props
什么是props？
props 是组件传递的参数。子组件通过this.props来接受！
在类组件中:
props通过子组件的this.props来接受父组件传过来的props值。
组件是可以复用的，最常见的就是循环来使用。与Vue不同的是：React他没有指令这一说法。jsx语法会自动循环数组。通常处理数组都采用高阶函数。例如
没有循环的用法：
<div class="box1"></div>
<script src="../../js/react.development.js"></script>
<script src="../../js/react-dom.development.js"></script>
<script src="../../js/babel.min.js"></script>
<script type="text/babel">
// 子组件
class Info extends React.Component {
render() {
const { name, age, sex } = this.props
return <div>
<h2>子组件Child</h2>
<div>姓名: {name}</div>
<div>年龄: {age}</div>
<div>性别: {sex}</div>
</div>
}
}
// 父组件
class Demo extends React.Component {
state = {
arr: [
{
name: '北幕',
age: 18,
sex: "man"
},
{
name: '北幕',
age: 18,
sex: "man"
},
{
name: '北幕',
age: 18,
sex: "man"
}
]
}
render() {
return (
<div>
<h1>我是Demo组件</h1>
<hr />
<Info name="耀阳" age="18" sex="男"></Info>
<Info name="吕德华" age="18" sex="男"></Info>
<Info name="北幕" age="18" sex="男"></Info>
</div>
)
}
}
ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
</script>有循环的用法
<div class="box1"></div>
<script src="../../js/react.development.js"></script>
<script src="../../js/react-dom.development.js"></script>
<script src="../../js/babel.min.js"></script>
<script type="text/babel">
// 子组件
class Info extends React.Component {
render() {
const { name, age, sex } = this.props
return <div>
<h2>子组件Child</h2>
<div>姓名: {name}</div>
<div>年龄: {age}</div>
<div>性别: {sex}</div>
</div>
}
}
// 父组件
class Demo extends React.Component {
state = {
arr: [
{
name: '北幕',
age: 18,
sex: "man"
},
{
name: '北幕',
age: 18,
sex: "man"
},
{
name: '北幕',
age: 18,
sex: "man"
}
]
}
render() {
return (
<div>
<h1>我是Demo组件</h1>
<hr />
{
this.state.arr.map(item => <Info name={item.name} age={item.age} sex={item.sex} ></Info>)
}
</div>
)
}
}
ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
</script>Props几个特点：
子组件不能修改传递的Props数据，只能由父组件来修改，或者从数据的源头来修改。
父组件传递参数，可以是其他的类型，利用jsx语法：{},跟vue的插值语法类似：都是js表达式！
父组件传递多个数据{…obj}
对象解构还是对象！！！
<div class="box1"></div>
<script src="../../js/react.development.js"></script>
<script src="../../js/react-dom.development.js"></script>
<script src="../../js/babel.min.js"></script>
<script type="text/babel">
// 子组件
class Info extends React.Component {
render() {
const { name, age, sex } = this.props
return <div>
<h2>子组件Child</h2>
<div>姓名: {name}</div>
<div>年龄: {age}</div>
<div>性别: {sex}</div>
</div>
}
}
// 父组件
class Demo extends React.Component {
state = {
obj: {
name: "耀阳1", age: "18", sex: "男"
}
}
render() {
return (
<div>
<h1>我是Demo组件</h1>
<hr />
<Info {...this.state.obj}></Info>
<Info name="吕德华" age="18" sex="男"></Info>
<Info name="北幕" age="18" sex="男"></Info>
</div>
)
}
}
ReactDOM.render(<Demo></Demo>, document.querySelector('.box1'))
</script>3.限制Props的传递类型
子组件接收父组件的类型,父组件可以随意的定义,
a. 子组件限制父组件传递的数据类型
b. 引入prop-types库
c. 需要在类上设置一个属性 propTypes，谁想限制给谁设置。写在类上面方法(静态方法)
d. 设置默认值 defaultProps = {}
这个不需要记住，用的时候查阅即可！
限制类型的简写：可以使用static静态方法。
4.函数接收props参数
函数中的state在hook中才能使用。暂时先不考虑。
函数的第一个参数就是props，在函数中只需要用第一个参数来接受即可
5.插槽
props下面的Childrene
到此这篇关于React中props使用介绍的文章就介绍到这了,更多相关React props内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解析react 函数组件输入卡顿问题 usecallback react.memo
useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算，这篇文章主要介绍了react 函数组件输入卡顿问题 usecallback react.memo,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了React父组件数据实时更新了,子组件没有更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
本篇文章主要介绍了React-Todos入门例子，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
本文记录如何使用vscode打造一个现代化的react-native开发环境，旨在提高开发效率和质量。本文给大家分享我遇到的问题及解决方法，感兴趣的朋友跟随小编一起看看吧2021-07-07
这篇文章主要介绍了如何在React中直接使用Redux,目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去，本文给大家详细讲解，需要的朋友可以参考下2022-12-12
在开发React应用程序时,我们都曾遇到过这样的场景：一个未被捕获的异常突然中断了组件的渲染流程,导致用户界面呈现出一片空白,也就是俗称的“白屏”现象,本文将探讨如何在React应用中有效捕获并处理这些错误,避免白屏现象的发生,需要的朋友可以参考下2024-06-06
高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧2023-01-01
本文详细介绍了将React+Next.js项目部署到服务器的步骤,包括服务器环境准备、项目配置与构建、启动服务、配置Nginx反向代理、HTTPS配置、验证与监控以及高级优化,感兴趣的朋友一起看看吧2025-03-03
这篇文章主要介绍了详解react native页面间传递数据的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家详细介绍了React实现动态调用的弹框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论