如何在 React 中使用 onClick 将 state/props 发送到另一个组件？

---

在本文中，我们将学习如何在 React 中将 state/props 从一个组件发送到另一个组件。️

在继续之前，让我们看看 React 中的 state 和 props 是什么。我们使用 props 和 state 来显示动态内容，这些内容会随着时间的推移而发生变化。

• Props: Props 是 Properties 的缩写。它们是只读的，这意味着它们不能被修改，我们从父组件传递 props 到子组件。这意味着接收了父组件 props 的子组件无法被修改。
• State: State 用于存储特定组件的数据，它是可变的。换句话说，我们可以在该组件内更改它。如果我们更改任何 state 值，那么它将立即触发该特定组件的重新渲染，该组件在其内被管理。

语法

将任何值作为 prop 从父组件传递到子组件的语法。

const AnyParentComponent = () => {
  const value = "Hey there kalyan!";
  return (
    <div>
      <ChildComponent propName={propValue} />
    </div>
  );
};

将 state/props 发送到另一个组件的示例

假设我们有两个组件 ComponentA 和 ComponentB，我们想将 state 作为 prop 从 ComponentA 传递到 ComponentB，prop 的值为一个虚拟文本，以下程序演示了如何实现这一点。

示例 1

将 state 作为 prop 传递到其他组件。

ComponentA.jsx

import React, { useState } from "react";
import ComponentB from "./ComponentB";
const ComponentA = () => {
  const loremIpsum =
    "Lorem Ipsum is simply dummy text of the
     printing and typesetting industry. Lorem 
     Ipsum has been the industry's standard 
     dummy text ever since the 1500s, when an 
     unknown printer took a galley of type and 
     scrambled it to make a type specimen book.
     It has survived not only five centuries, 
     but also the leap into electronic typesetting,
     remaining essentially unchanged.";
  const [content, setContent] = useState("");
  const sendContent = (e) => {
    e.target.innerText = "Sent";
    setContent(loremIpsum);
  };
  return (
    <div>
      <button onClick={sendContent}> 
        Send Content to Component B
      </button>
      <ComponentB content={content} />
    </div>
  );
};

export default ComponentA;

ComponentB.jsx

import React, { useState } from "react";

const ComponentB = ({ content }) => {
  const [isOpen, setIsOpen] = useState(false);
  const toggleAccordion = () => {
    setIsOpen(!isOpen);
  };
  return (
    <div
      style={{
        border: "1px solid #ccc",
        borderRadius: "4px",
        width: "80%",
        margin: "20px auto",
      }}
    >
      <div
        onClick={toggleAccordion}
        style={{
          padding: "10px",
          backgroundColor: "#000",
          cursor: "pointer",
          fontWeight: "bold",
        }}
      >
        {isOpen ? "Click to Hide Content" : "Click to Show Content"}
      </div>
      <div
        style={{
          maxHeight: isOpen ? "100px" : "0",
          overflow: "hidden",
          overflowY: "auto",
          transition: "max-height 0.1s ease",
        }}
      >
        {isOpen ? (
          <p style={{ padding: "10px" }}>{content}</p>
        ) : (
          "No content to display."
        )}
      </div>
    </div>
  );
};
export default ComponentB;

输出

解释

ComponentA

• 我们使用 'content' state 来管理 loreamIpsum 文本。
• 当点击按钮时，它会调用 sendContent 函数，该函数使用其 setContent 函数更新 `content` state。
• 然后，此更新后的内容作为 prop 传递给 `ComponentB`。
• 在点击按钮之前，传递的 prop 为空内容，因为 content state 的初始值为 '' 空字符串。

ComponentB

• 我们使用 'content' state 来管理 loreamIpsum 文本。
• 当点击按钮时，它会调用 sendContent 函数，该函数使用其 setContent 函数更新 `content` state。
• 然后，此更新后的内容作为 prop 传递给 `ComponentB`。
• 在点击按钮之前，它将 prop 作为空内容传递，因为 content state 的初始值为 '' 空字符串。

示例 2

将 state 作为 prop 传递到其他组件。

ComponentA.jsx

import React, { useState } from "react";
import ComponentB from "./ComponentB";
const ComponentA = () => {
  const [message, setMessage] = useState("No Message");
  const updateMessage = () => {
    setMessage("Hey there Kalyan 👩🏻‍💻😊");
  };
  return (
    <div>
      <button onClick={updateMessage}>Send Message</button>
      <ComponentB message={message} />
    </div>
  );
};

export default ComponentA;

ComponentB.jsx

import React from "react";
const ComponentB = ({ message }) => {
  return (
    <div>
      <h2>Message from prop: {message}</h2>
    </div>
  );
};
export default ComponentB;

输出

解释

在 ComponentA 中，我们的 state 为 `message`，点击“发送消息”按钮将调用 `updateMessage` 函数，并将 message state 更新为某些文本。此 state 作为 prop 从 ComponentA 传递到 CompoentB。在 ComponentB 中，我们只是接收 message 作为 prop 并打印它。

结论

因此，我们了解了如何在 React 中在不同组件之间传递 state 和 props。Props 是只读的，我们将其从上级组件传递到下级子组件，它是不可变的，而 state 是可变的，并在同一组件内使用。