Question

我正在React.js中创建一个音乐播放器应用程序，该应用程序由代表不同音乐类型的不同图块组成。这是App.js主文件中的代码。

import React from "react";
import Genre from "./Genre.js";
import Row from "./Row.js";
//import genreData from "./genreData.js";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <Row>
        <Genre name="Pop" bgColor="#d13636" />
        <Genre name="Rap" bgColor="#ef7421" />
        <Genre name="R&B" bgColor="#f7d021" />
      </Row>
      <Row>
        <Genre name="Gospel" bgColor="a9d856" />
        <Genre name="Contemp. Christian" bgColor="#468f69" />
        <Genre name="Country" bgColor="#73ccdb" />
      </Row>
      <Row>
        <Genre name="Kompa" bgColor="#2690cf" />
        <Genre name="EDM" bgColor="#908bb8" />
        <Genre name="Latin" bgColor="#9b60b6" />
      </Row>
    </div>
  );
}

export default App;

由于某种原因，流派组件未在主行组件内部进行渲染，背景色也未针对每个图块显示。

这是Row.js和Genre.js文件中的代码

import React from "react";

const Genre = props => {
  const bgColor = props.bgColor;
  return (
    <div style={{ backgroundColor: { bgColor } }} className="genre">
      <p>{props.name}</p>
    </div>
  );
};

export default Genre;

import React from "react";

const Row = () => {
  return (
    <div className="row">
    </div>
  );
};

export default Row;

这也是主要的CSS文件：

.App {
  font-family: sans-serif;
  text-align: center;
  padding: 0%;
  position: relative;
  margin-top: 10px;
  width: 100%;
}

.row {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-bottom: 15px;
}

.genre {
  border-radius: 20px;
  height: 140px;
  margin: 0 10px;
  width: 140px;
  text-align: center;
}

老实说，我不知道我在做什么错，甚至在发布此问题之前我都问过别人。

Answer 1

这里有很多不同的问题。首先是样式。

在Genre中，style object中的属性值应该是字符串，因此您需要：

style={{ backgroundColor: bgColor }}

第二个问题在Row组件中。您作为子级传递给组件的事物（例如Genre元素）是passed via the children prop，因此您只需要自己传递：

const Row = ({ children }) => {
  return (
    <div className="row">
      {children}
    </div>
  );
};

嵌套在其他组件中时组件不出现

1 个答案: