React组件Props传递问题求助：卡片样式不生效且页面空白

问题核心错误点 #

• 重复导入React导致语法错误：Card.jsx中重复声明import React from "react";，触发编译错误，直接导致组件无法渲染、页面空白。
• 内联样式属性使用错误：React中设置内联样式必须通过style属性，而非自定义的cardStyles属性，自定义属性不会被解析为CSS样式。
• 未传递必要Props引发渲染异常：App组件中直接渲染的空<Card />无任何props，About组件中最后两个Card未传递cardStyle，会导致props.skill或props.cardStyle为undefined，影响渲染逻辑。
• 错误打印对象导致显示异常：Card组件中直接输出{props.cardStyle}会将对象转为字符串[object Object]，破坏页面展示效果。

修复后的代码 #

Card.jsx

import React from "react";

function Card(props) {
  // 为未传递cardStyle的卡片设置默认样式，避免样式丢失
  const defaultStyle = { backgroundColor: "gray" };
  return (
    <div className="card" style={props.cardStyle || defaultStyle}>
      <div>{props.skill}</div>
    </div>
  );
}
export default Card;

About.jsx

import React from "react";
import Card from "./Card.jsx";

function About(props) {
  return (
    <div>
      <p>
        Frontend developer with a passion for building beautiful, functional and
        dynamic websites
      </p>
      <Card className="card1" skill="HTML" cardStyle={props.styles[0]} />
      <Card className="card2" skill="CSS" cardStyle={props.styles[1]} />
      <Card className="card3" skill="JavaScript" cardStyle={props.styles[2]} />
      {/* 给React、Node.js卡片分配样式 */}
      <Card className="card4" skill="React" cardStyle={props.styles[3]} />
      <Card className="card5" skill="Node.js" cardStyle={{ backgroundColor: "purple" }} />
    </div>
  );
}
export default About;

App.jsx

import { useState } from "react";
import "./index.css";
import "./App.css";
import Card from "./Card.jsx";
import About from "./About.jsx";
import Header from "./Header.jsx";

function App() {
  const properties = {
    language: "Javascript",
    framework: "React",
    skills: ["HTML", "CSS", "JavaScript"],
  };
  const cardStyles = [
    { backgroundColor: "blue" },
    { backgroundColor: "green" },
    { backgroundColor: "black" },
    { backgroundColor: "red" },
  ];

  return (
    <>
      <Header />
      <About styles={cardStyles} />
      {/* 移除无props的空Card，避免渲染异常 */}
    </>
  );
}

export default App;

修复说明 #

1. 移除重复导入：删除Card.jsx中重复的React导入语句，保证组件正常编译。
2. 修正样式属性：将Card组件中的自定义cardStyles属性替换为React标准的style属性，同时添加默认样式处理未传参的情况。
3. 补全缺失Props：为所有Card实例传递必要的skill和cardStyle，移除App中无意义的空Card组件。
4. 清理无效输出：删除Card组件中打印props.cardStyle的代码，只保留技能名称展示。

内容的提问来源于stack exchange，提问作者Johannes Pettersson