Question

我正在使用包含对象数组的父组件编写一个React函数：

MediaSource

...

在子组件中，有一个map函数可以将数组分解为要在div中显示的单个项目。

为对象let const ingredients = [ {name:"lettuce",color:"green"}, {name:"tomato",color:"red"} ]定义CSS样式以设置className:"name"的最佳实践是什么？我试图避免手动输入“成分”的整个键/值集，以允许在不破坏代码的情况下更新对象。

我目前正在使用内联样式，建议不要这样做。当前正在使用：

backgroundColor: {ingredient.color};

Answer 1

当您有其他解决方案来执行所需的操作时，内联样式不好。在这里，您有一个颜色（红色，绿色等）的字符串，因此可以为每种颜色编写一个CSS类，但这当然是一个非常糟糕的主意。内联样式是在此处进行操作的好方法。

Answer 2

我建议设置div的类而不是样式。这样一来，您无需改变样式即可更改外观。

您可以为生菜创建背景颜色为绿色的css类，而不是使用设置为item.color的{{1}}

Answer 3

您可以使用这种方式。

如果使用scss，

css会更方便

// css
.color-green {
  color: green;
}
.color-red {
  color: red;
}

import React from "react";
import "./styles.css";

const ingredients = [
  { name: "lettuce", color: "green" },
  { name: "tomato", color: "red" }
];
const Vegetable = ({ color, text }) => {
  return (
    <p>
      this is <span className={`color-${color}`}>{text}</span> color{" "}
    </p>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {ingredients.map((item, index) => {
        return <Vegetable key={index} color={item.color} text={item.name} />;
      })}
    </div>
  );
}

如何在不使用内联样式的情况下动态设置映射元素的样式？

3 个答案: