跳至主要內容

react 函数组件中 props应用

程序员王天大约 1 分钟

在 React 函数组件中,可以通过 props 对象来接收传递给组件的属性(props)。以下是一些常见的 props

  1. 自定义属性:
    你可以根据需要在组件上定义任意数量的自定义属性,并在父组件中传递给子组件。子组件可以通过 props 对象来访问这些属性。
function MyComponent(props) {
  return <div>{props.name}</div>;
}

// 在父组件中使用 MyComponent,并传递 name 属性
<MyComponent name="John" />;
  1. 子组件:
    在组件的内容中可以包含一个或多个子组件。这些子组件可以通过 props.children 属性来访问。
function ParentComponent(props) {
  return <div>{props.children}</div>;
}

// 在父组件中使用 ParentComponent,并传递子组件作为其内容
<ParentComponent>
  <ChildComponent1 />
  <ChildComponent2 />
</ParentComponent>;
  1. 回调函数:
    你可以将函数作为属性传递给子组件,以便子组件在需要时调用该函数。这通常用于实现交互和事件处理。
function ParentComponent(props) {
  const handleChildEvent = () => {
    // 处理子组件事件
  };

  return <ChildComponent onClick={handleChildEvent} />;
}

function ChildComponent(props) {
  return <button onClick={props.onClick}>Click</button>;
}

这些只是一些基本的示例,实际上你可以根据需要在组件中使用各种不同的属性。在函数组件中,props 对象是一个包含传递给组件的属性的 JavaScript 对象。你可以根据具体情况来决定如何在组件中使用这些属性。

读者朋友好呀,我是王天~ 😊

尝试做过很多事情,半路出道的野生程序员、前端讲师、新手作者,最终还是喜欢写代码、乐于用文字记录热衷分享~

如文章有错误或者不严谨的地方,期待给于指正,万分感谢。🙇‍

如果喜欢或者 有所启发,欢迎 star,对作者也是一种鼓励👏

微信:「wangtian3111」,加我进王天唯一的读者群。

个人博客:https://itwangtian.com