React：从一个组件传递变量到另一个组件

Question

作为新手React开发者，我想要做的就是在父组件中将一些常量传递给子组件。

在提供的代码片段中，您已在父组件App中定义了一个常量PIinput，并尝试将其传递给子组件Card。但是，在子组件中访问props.label和props.inputs时遇到了未定义的问题。

以下是您提供的React JSX代码及其对应的描述翻译：

// 导入样式和组件
import './App.css';
import { Display } from './Display';
import { Card } from './Card';

// App组件导出函数
export function App() {
    // 定义要传递给子组件的常量对象
    const PIinput = {
        label: '个人信息',
        inputs: ['姓名', '地址', '邮箱', '电话'],
    };

    // 在 JSX 中返回元素，并将 PIinput 对象作为属性传递给 Card 组件
    return (
        <>
            
                {/* 传递props={PIinput} */}
                
            
            
        
    );
}

// Card组件导出函数
export function Card(props) {
    // 尝试打印props对象和props.label属性
    console.log(props, props.label);

    // 返回一个带有props信息的卡片元素
    return (
        
            {/* 显示label属性值 */}
            {props.label}
            {/* 创建一个表单，遍历并显示inputs数组中的每一项 */}
            
                {props.inputs.map((item) => {
                    return {item};
                })}
            
        
    );
}

当我尝试将PIinput传递给Card组件，并在其中console.log(props)时，它会显示出我的对象；但当我尝试通过console.log或使用props.label、props.inputs时，却得到未定义的结果。

请问应如何正确地传递这些值呢？

John Feminella · Answer

在父组件中以这种方式传递PIinput：

然后在子组件Card中，可以这样解构props：

function Card({ PIinput }) {
  console.log(PIinput);
  ...
}

Robin Rodricks · Answer

我想您误会了关于传递props的规则，让我们先澄清一下。

您可以在这个CodeSandbox链接找到相关代码。

App.js

import Card from "./Card";
export default function App() {
  const PIinput = {
    label: "个人信息",
    inputs: ["姓名", "地址", "邮箱", "电话"],
  };
  return (
    <>
      
        {/* 正确传递PIinput对象 */}
        
      
      {/* {/*  */}
    
  );
}

Card.js

export default function Card({ PIinput }) {
  console.log(PIinput, PIinput.label);
  return (
    
      {/* 使用解构后的PIinput.label */}
      {PIinput.label}
      
        {/* 遍历解构后的PIinput.inputs */}
        {PIinput.inputs.map((item) => {
          return {item};
        })}
      
    
  );
}