如何在 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 是可變的，並在同一組件內使用。