React中如何传递Icon组件为Props，动态使用data中的color值

你遇到的核心问题是：原来传递的是已经渲染好的React元素（<Icon color="green" />），而非组件本身，元素的props一旦创建就无法动态修改；而你尝试的<icon color={dat.color} />错误地把元素当成组件使用，且小写标签会被React解析为HTML原生标签，自然不生效。

方法一：传递Icon组件本身（推荐） #

修改App组件，直接传递Icon组件而非它的实例，然后在Component1中动态传入color属性：

export default function App() {
  return (
    <div className="App">
      {/* 传递Icon组件本身，不是已渲染的元素 */}
      <Component1 Icon={Icon} />
    </div>
  );
}

const Component1 = ({ Icon }) => {
  const data = [
    { name: "First", color: "green" },
    { name: "Second", color: "red" },
  ];

  return (
    <ul>
      {data.map((dat, index) => (
        <div key={index}>
          <li>Name: {dat.name}</li>
          {/* 动态给Icon组件传入data中的color值 */}
          <li>Icon: <Icon color={dat.color} /></li>
        </div>
      ))}
    </ul>
  );
};

const Icon = ({ color }) => (
  <div style={{ backgroundColor: color, width: 20, height: 20 }} />
);

方法二：利用React元素的type属性（不修改App的传参方式） #

如果不想改动App组件的传参逻辑，可以通过已传递元素的type属性获取原始组件，再用React.createElement创建新元素并传入动态color：

import React from 'react';

export default function App() {
  return (
    <div className="App">
      <Component1 icon={<Icon color="green" />} />
    </div>
  );
}

const Component1 = ({ icon }) => {
  const data = [
    { name: "First", color: "green" },
    { name: "Second", color: "red" },
  ];

  return (
    <ul>
      {data.map((dat, index) => (
        <div key={index}>
          <li>Name: {dat.name}</li>
          {/* 从已有元素中获取组件，创建新元素并传入动态color */}
          <li>Icon: {React.createElement(icon.type, { color: dat.color })}</li>
        </div>
      ))}
    </ul>
  );
};

const Icon = ({ color }) => (
  <div style={{ backgroundColor: color, width: 20, height: 20 }} />
);

关键说明 #

• React中，大写开头的变量会被识别为自定义组件，小写开头会被解析为HTML原生标签，所以组件使用时必须保证变量名大写。
• 传递组件本身时，你可以在任意时机传入不同的props；传递已渲染的元素时，它的props是固定的，只能通过type属性回溯到原始组件重新创建元素。

内容的提问来源于stack exchange，提问作者pmiranda