在 React 函数式组件中传递 Props答案

【问题标题】：Passing Props in React Functional Component在 React 函数式组件中传递 Props
【发布时间】：2021-06-16 15:03:07
【问题描述】：

我正在尝试了解道具的工作原理。目前我有一个要发送到另一个组件的数组。但是输入组件将 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;

我哪里错了？对不起，我的问题很琐碎。提前致谢，

【问题讨论】：

您错过了退货声明：return <ReceiveData data ={sendData} />

标签： reactjs jsx react-props

【解决方案1】：

几乎没有语法问题，例如两个文件都缺少单引号，Data() 函数中缺少 => 箭头，还缺少 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;

【讨论】：

【解决方案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} />;
};

您在数据函数组件中遗漏了一些东西。粗箭头语法上的返回语句和缺少箭头。

【讨论】：

【解决方案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 组件。并修改箭头功能。

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

【讨论】：