Reactjs，使用不同的样式对数组的每个元素进行样式化

Question

我想创建一个包含一些元素的数组，然后迭代（使用.foreach或.map）它。但每个数组元素必须具有不同的样式。例如，我有一个数组如下所示：

["johnny red", "Stephanie blue", "Hans green", "Fifty Shades Of grey :d"] 

另外，我想在另一个组件中重用数组的一些单独元素。我怎么能那样做？

（假设每个元素中的最后一个单词是一个单独的样式，例如background-color或color，)

你能帮帮我吗？请给我一个建议，我会怎么做？

Answer 1

不是很清楚您想要什么，但是您可以像这样将样式附加到组件：

null

const values = [
  {
    text: "one",
    css: { color: 'blue' }
  },
  {
    text: "two",
    css: { color: 'red' }
  },
];

const Test = props => {
  const { values } = props;
  
  return (
    <div>{values.map(
      (value, i) => <div key={i} style={value.css}>{value.text}</div>
    )}</div>
  );
}

ReactDOM.render(
  <Test values={values} />,
  document.getElementById("react")
);

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