时间戳

首页 > 解决方案 > 如何为带有数据数组的 React 组件传递内联样式的道具？

javascript - 如何为带有数据数组的 React 组件传递内联样式的道具？

问题描述

这是我的 ShowData 组件，它在我的 App.js 中呈现，然后在我的 index.js 中呈现

import React from "react";
import SwatchData from "./SwatchData";
import { DataTestContainer } from "./DataTestContainer";

function ShowData(props) {
  const DataComponent = SwatchData.map(data => (
    <DataTestContainer color={data.color} key={data.id} hex={data.hex} />
  ));

  return (
    <div style={{ background: "{props.data.color}" }}>{DataComponent}</div>
  );
}

export default ShowData;

我希望根据 data.color 属性动态更改最终 div 的样式

const SwatchData = [
  {
    id: 1,
    color: "red",
    hex: "#E73550"
  },
  {
    id: 2,
    color: "green",
    hex: "#A6A7DC"
  }
];

export default SwatchData;

标签： javascriptjsonreactjs

解决方案

而不是映射SwatchData然后尝试单独包装它，而是一起做 -

function ShowData(props) {
  const DataComponent = SwatchData.map(data => (
    <div style={{ backgroundColor: data.color }}> 
      <DataTestContainer color={data.color} key={data.id} hex={data.hex} />
    </div>
  ));

  return DataComponent;
}

此外，您需要backgroundColor使用内联样式更改背景颜色。

推荐阅读