日期:2022年10月3日

props

之前我们所定义的组件内容几乎都是固定的,组件创建的时候什么样,使用时就是什么样。但在开发时,我们往往需要的是一些动态显示的组件,换句话组件中所显示的内容必须是动态设置的。

在使用组件时,可以通过向组件传递参数的形式来向组件传递数据,这一点和JS中的函数非常相似。函数可以通过传递实参来决定函数的执行结果,组件也不例外。函数的参数如何传递我们是非常清楚的,那么组件的参数是怎么传递的呢?组件的参数需要通过属性传递,可以像这样向组件中传递参数:

<Button bgColor='red' color='white'>我是一个按钮</Button>

上边的案例中我们设置了两个属性,这些属性会被封装到一个对象中并作为参数传递给Button组件,只需要在Button组件中定义一个参数即可获取,通常这个参数我们会命名为props,像这样:

import './Button.css';
const Button = (props) => {
   return <button style={{backgroundColor:props.bgColor, color:props.color}}>{props.children}</button>;
};

export default Button;

在组件内部可以通过props.xxx来访问外部传递进的属性,从而达到动态设置的目的。需要注意的是,标签体也可以设置为props的一个属性,叫做children,可以通过props.children来获取标签体的内容。

还有一点一定要记住,props中的属性是只读属性是无法修改的!

5 2 投票数
文章评分
订阅评论
提醒
guest

0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x