反应JS | 道具类型

在React中，道具（Props）是由父组件传递给子组件的数据。道具可以是任何类型的数据，包括字符串，数字，布尔值，函数，甚至是组件。通过使用道具，我们可以使组件更加可配置和可重用。

基本道具

我们可以通过在组件上设置属性来传递道具。例如，下面是一个包含两个基本道具（字符串和数字）的组件：

function MyComponent(props) {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
    </div>
  );
}

<MyComponent name="Alice" age={30} />

在这个例子中，name和age是两个基本道具，它们分别以字符串和数字的形式传递给MyComponent组件。然后在组件内部，我们可以通过props对象来访问这些道具。

函数道具

除了基本数据类型，我们也可以将函数传递给组件作为道具。这种道具被称为函数道具（Function Props），因为它们是函数类型的道具。

例子：

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

function App() {
  function handleClick() {
    alert("Button clicked!");
  }

  return <MyButton onClick={handleClick} />;
}

在这个例子中，MyButton组件接受一个名为onClick的函数道具，并将其绑定到按钮的onClick事件上。在App组件中，我们定义了一个名为handleClick的函数，并将其作为道具传递给MyButton组件。当按钮被点击时，handleClick函数将被调用。

子道具

道具不仅可以是基本数据类型和函数，它们也可以是其他React组件。这些道具被称为子道具（Children Props）。

例子：

function MyCard(props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <div>{props.children}</div>
    </div>
  );
}

function App() {
  return (
    <MyCard title="My Card">
      <p>This is the content of my card.</p>
    </MyCard>
  );
}

在这个例子中，MyCard组件接受一个名为children的子道具，并将其渲染在组件的内容区域中。在App组件中，我们将一个段落作为子道具传递给MyCard组件，并将其显示在卡片的内容区域中。

静态道具

默认情况下，道具是只读的。这意味着子组件无法修改传递给它们的道具。React的单向数据流模型强制执行这种不可变性，这有助于减少在应用程序中的错误和调试时间。

因此，我们称传递给组件的道具为静态道具（Static Props）。

例子：

function MyComponent(props) {
  props.name = "Bob"; // This is not allowed!
  return <p>Hello, {props.name}!</p>;
}

在这个例子中，我们试图修改props.name，但是这是不允许的。我们必须通过父组件来传递必要的数据。

动态道具

虽然道具本身是只读的，但它们可以从父组件中动态获取值，在渲染时进行更改。这些类型的道具被称为动态道具（Dynamic Props）。

例子：

function MyComponent(props) {
  const [name, setName] = React.useState("Alice");

  function handleClick() {
    setName("Bob");
  }

  return (
    <div>
      <p>Hello, {name}!</p>
      <button onClick={handleClick}>Change Name</button>
    </div>
  );
}

在这个例子中，MyComponent组件使用useState钩子来创建一个名为name的动态道具，并将其初始值设置为"Alice"。然后，我们在组件的渲染方法中将其渲染为{name}。当用户点击按钮时，我们调用setName函数来更改name的值。由于name是一个动态道具，因此组件将重新渲染，并显示最新的名称。

总结：道具是React中非常重要的概念。它们通过父组件传递数据和函数给子组件，使得组件具有更高的可重用性和可配置性。我们可以创建各种类型的道具，包括基本道具，函数道具，子道具，静态道具和动态道具。