更改 map function 中的背景颜色，反应 js 和 javascript 项目

Question

const colorList = [
    '#FF6263',
    '#DE4839',
    '#BF3325',
    '#E21717',
    '#BF3312',
    '#D82E2F',
    '#EB4D4B',
    '#EF5354',
    '#B4161B',
    '#E6425E',
    '#E83A59',
    '#B9345A']

        <Row flex="flex">
        {colorList.map((data, index) =>{
            const dat = `'${data}'`
            console.log(`'${data}'`)
            return(
                <Col key={index} style={{
                    width: '50px',
                    height: '200px',
                    backgroundColor: {dat}
                }}>
                    <p>{data}</p>
                </Col>
            )
        })}
        </Row>

Answer 1

你正在传递像 backgroundColor: "'#someColor'" 这样的颜色

编辑此行

const dat = `'${data}'`

至

const dat = `${data}`

Answer 2

您已经在使用反引号，这就是为什么不需要使用单引号（ '' ）；

改变 1-

应该-

`const dat = `${data}`;

代替

const dat = `'${data}'`

改变 2-

应该

style={{
        width: '50px',
        height: '200px',
        backgroundColor: dat
      }}

代替

style={{
         width: '50px',
         height: '200px',
         backgroundColor: {dat}
      }}

改进：

<Row flex="flex">
        {colorList.map((data, index) =>{
            const dat = `${data}`;
            console.log(`${data}`);
            return(
                <Col key={index} style={{
                    width: '50px',
                    height: '200px',
                    backgroundColor: dat
                }}>
                    <p>{data}</p>
                </Col>
            )
        })}
        </Row>

Answer 3

另一种最好的映射方式是：

  const colorList = [
    { color: "#FF6263" },
    { color: "#DE4839" },
    { color: "#BF3325" },
    { color: "#E21717" },
    { color: "#BF3312" },
    { color: "#D82E2F" },
    { color: "#EB4D4B" },
    { color: "#EF5354" },
    { color: "#B4161B" },
    { color: "#E6425E" },
    { color: "#E83A59" },
    { color: "#B9345A" },
  ];
      <Row flex="flex">
        {colorList.map((data, index) => {
          return (
            <Col
              key={index}
              style={{
                width: "50px",
                height: "200px",
                backgroundColor: `${data.color}`,
              }}
            >
              <p>{data.color}</p>
            </Col>
          );
        })}
      </Row>