在 React 中,props(属性)用于在组件之间传递数据。它是父组件向子组件传递信息的一种方式,通过 props,父组件可以向子组件传递数据、回调函数、配置项等。
注意: props 是只读的,它的值由父组件传递给子组件时确定,并且在子组件中不能直接修改。如果子组件需要改变这些值,应该通过回调函数等方式将要修改的数据传递给父组件,由父组件来更新相关的状态。
基本使用:
// 一个组件
// 通过函数参数来接收 props()
const Module = (props) => {
console.log(props);
// 注意 prpos 是只读的对象,直接操作会报错
// props.size = 30;
return (
<div>
<p>组件</p>
{/* <img src={props.imgUrl} width={props.size} alt="" /> */}
<img src={imgUrl} width={size} alt="" />
</div>
);
};
使用组件:
给组件传递 props(注意:如果要给组件传递非字符串类型的数据,要使用 {} 来传递)
// react 中的 props 的使用
const App = () => {
return (
<div>
<p>使用</p>
<Module
size={200}
imgUrl="https://p3-passport.byteimg.com/img/user-avatar/732186508929940c0ea6978021bc9f76~100x100.awebp"
></Module>
</div>
);
};
export default App;
通过解构简化使用 ,还可以再此处赋初始值文章来源:https://www.toymoban.com/news/detail-608787.html
const Module = ({ imgUrl, size = 50 }) => {
return (
<div>
<p>组件</p>
<img src={imgUrl} width={size} alt="" />
</div>
);
};
完整解释代码文章来源地址https://www.toymoban.com/news/detail-608787.html
// 一个组件
// 通过函数参数来接收 props()
// const Module = (props) => {
// 通过解构简化,可以再此处赋初始值
const Module = ({ imgUrl, size = 50 }) => {
// console.log(props);
// 注意 prpos 是只读的对象,直接操作会报错
// props.size = 30;
return (
<div>
<p>组件</p>
{/* <img src={props.imgUrl} width={props.size} alt="" /> */}
<img src={imgUrl} width={size} alt="" />
</div>
);
};
// react 中的 props 的使用
const App = () => {
return (
<div>
<p>123</p>
{/* 给组件传递 props(注意:如果要给组件传递非字符串类型的数据,要使用 {} 来传递) */}
<Module
size={200}
imgUrl="https://p3-passport.byteimg.com/img/user-avatar/732186508929940c0ea6978021bc9f76~100x100.awebp"
></Module>
</div>
);
};
export default App;
到了这里,关于在 React 中,props(属性)用于在组件之间传递数据的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!