如何在React容器组件中识别子组件A和B？

要在Container组件里识别子组件A和B，有两种常用的靠谱方法：

方法一：利用组件的name或displayName属性 #

函数组件默认自带name属性，值就是你定义组件时的函数名。你可以在Container里遍历子组件，通过检查每个子组件的type.name来区分：

修改后的代码示例：

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

export default function App() {
  return (
    <div className="App">
      <Container>
        <A/>
        <B/>
      </Container>
    </div>
  );
}

const A = () => <div>A</div>;

const B = () => <div>B</div>;

const Container = (p) => {
  // 用React.Children.forEach兼容单个/多个子组件的情况
  React.Children.forEach(p.children, child => {
    if (child.type.name === 'A') {
      console.log('识别到A组件');
    } else if (child.type.name === 'B') {
      console.log('识别到B组件');
    }
  });
  return <div>C</div>;
};

如果代码会被生产环境压缩（函数名可能被混淆），可以手动给组件设置displayName：

const A = () => <div>A</div>;
A.displayName = 'A';

const B = () => <div>B</div>;
B.displayName = 'B';

方法二：给组件添加自定义标识属性 #

这种方法更稳定，不受代码压缩影响。给A、B组件添加自定义静态属性，再在Container里检查该属性：

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

export default function App() {
  return (
    <div className="App">
      <Container>
        <A/>
        <B/>
      </Container>
    </div>
  );
}

const A = () => <div>A</div>;
// 添加自定义标识
A.componentTag = 'COMPONENT_A';

const B = () => <div>B</div>;
B.componentTag = 'COMPONENT_B';

const Container = (p) => {
  React.Children.forEach(p.children, child => {
    if (child.type.componentTag === 'COMPONENT_A') {
      console.log('识别到A组件');
    } else if (child.type.componentTag === 'COMPONENT_B') {
      console.log('识别到B组件');
    }
  });
  return <div>C</div>;
};

注意事项 #

• 仅对自定义组件有效：原生DOM元素（比如<div>）的type是字符串，而自定义组件的type是对应函数/类。
• 优先用React.Children.forEach：它能处理子组件为单个元素、数组甚至null的各种场景，比普通数组遍历更鲁棒。

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