arcbyte/React
学习库ReactComponents and Props

Components and Props

Create reusable components and pass immutable inputs through props.

更新于 适用于 React 19.2

Components are regular JavaScript functions that return React elements. Props are their inputs, letting one component render many useful variations.

Passing a prop

Greeting.tsx
function Greeting({ name }: { name: string }) {
  return <p>Hello, {name}!</p>;
}

Using the component

Page.tsx
<Greeting name="Ari" />
<Greeting name="Mei" />

Compose children

Panel.tsx
function Panel({ title, children }: { title: string; children: React.ReactNode }) {
  return <section><h2>{title}</h2>{children}</section>;
}

<Panel title="Progress"><p>Three lessons complete.</p></Panel>

Keep this

  • Props are component inputs.
  • JSX attributes become prop values.
  • Nested JSX is available through the children prop.
  • TypeScript can describe the expected shape.
学习位置已保存在此设备上。