在 React 函數式組件中傳遞 Props

Question

我試圖了解道具是如何工作的。 目前我有一個要發送到另一個組件的數組。 但是輸入組件將 props 值顯示為

“不明確的”

. 下面是我的代碼：

import React from 'react;
import ReceiveData from "./ReceiveData";

const Data =() = {
const sendData = ["1A", "2A", "3A", "4A", "1B", "2B", "3B", "1C", "2C", "3C", "4C", "1D", "2D", "3D", "4D", "4B"];
<ReceiveData data ={sendData} />
}
export default Data;

ReceiveData 組件的代碼如下：

import React from 'react;
    function ReceiveData(props){
     console.log("Props Output: ", props.data);
    }
    export default ReceiveData;

我哪里錯了？ 對不起，我的問題很瑣碎。 提前致謝，

Answer 1

幾乎沒有語法問題，例如兩個文件上都缺少單引號，並且Data() function 中缺少=>箭頭，並且還缺少return語句

我寫了更新的代碼

import React from 'react';
import ReceiveData from "./ReceiveData";

const Data = () => {
const sendData = ["1A", "2A", "3A", "4A", "1B", "2B", "3B", "1C", "2C", "3C", "4C", "1D", "2D", "3D", "4D", "4B"];
   return <ReceiveData data ={sendData} />
}
export default Data;

對於第二個文件

import React from 'react';
    function ReceiveData(props){
         console.log("Props Output: ", props.data);

         return <div>html code here</div>
    }
export default ReceiveData;

Answer 2

const Data = () => {
  const sendData = ["1A", "2A", "3A", "4A", "1B", "2B", "3B", "1C", "2C", "3C", "4C", "1D", "2D", "3D", "4D", "4B"];
  return <ReceiveData data={sendData} />;
};

您在 Data function 組件中遺漏了幾件事。 粗箭頭語法上的返回語句和缺少箭頭。

Answer 3

請嘗試以下代碼。

const Data = () => {
  const sendData = ["1A", "2A", "3A", "4A", "1B", "2B", "3B", "1C", "2C", "3C", "4C", "1D", "2D", "3D", "4D", "4B"];
  return (<ReceiveData data ={sendData} />)
}

function ReceiveData(props){
  console.log("Props Output: ", props.data);

  return <div>something</div>
 }

首先，Data 組件返回 ReceiveData 組件。 並修改箭頭function。

其次，在 ReceiveData 組件中添加一些返回元素。