在 Udemy 的练习中需要帮助了解如何在 React 中传递 props

Question

好的，这是我的 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} />
      <Card />
    </>
  );
}

export default App;

然后这是我的 About.jsx，我想将 props 传递给它，cardStyles 都包含 css 样式，以便背景颜色对于 Card 的每个实例以及技能 prop 都是可变的，但出于某种原因，我设法使技能道具可以工作，但卡样式不行

import React from "react";
import Card from "./Card.jsx";
function About(props) {
  const About = ({ styles }) => {};

  return (
    <div>
      <p>
        Frontend developer with a passion for building beautiful, functional and
        dynamic websites
      </p>
      <Card className="card1" skill="HTML" styles={props.styles[0]} />
      <Card className="card2" skill="CSS" />
      <Card className="card3" skill="JavaScript" />
      <Card className="card4" skill="React" styles={props.cardStyles[0]} />
      <Card className="card5" skill="Node.js" styles={props.cardStyles[1]} />
    </div>
  );
}
export default About;

最后是 Card.jsx 组件：

import React from "react";

function Card(props) {
  return (
    <>
      <div className="card">
        <div>
          {props.skill} {props.cardStyles}
        </div>
      </div>
    </>
  );
}
export default Card;

再说一遍，到目前为止，每个组件都像这样

我尝试将 props 传递给 About.jsx 和 Card.jsx，我希望事情能够正常工作，即我希望能够在每张卡片

your text

组件实例中定义每个 div 将具有的背景颜色以及要显示的技能，但事实并非如此。实际结果是一个空白页，没有错误，只是一个空白页。

Answer 1

你通过了

styles

<Card className="card1" skill="HTML" styles={props.styles[0]} />

但是你正在使用

{props.skill} {props.cardStyles}

---

因此您需要匹配这些，例如，传递并用作

cardStyle

。

---

演示显示此内容：

const { useState } = React;

function Card(props) {
  return (
    <div className="card" style={props.cardStyle}>
      <div>
        {props.skill} {props.cardStyle.backgroundColor}
      </div>
    </div>
  );
}

function About(props) {
 return (
    <div>
      <Card className="card1" skill="HTML" cardStyle={props.styles[0]} />
      <Card className="card4" skill="React" cardStyle={props.styles[1]} />
      <Card className="card5" skill="Node.js" cardStyle={props.styles[2]} />
    </div>
  );
}

const App = () => {

    const cardStyles = [
      { backgroundColor: "blue" },
      { backgroundColor: "green" },
      { backgroundColor: "black" },
      { backgroundColor: "red" },
    ];

    return (
        <div>
            <h1>{'Example'}</h1>
            <About styles={cardStyles} />
        </div>
    )
}
ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>