React函数组件中，子组件如何识别父组件？

方法一：父组件克隆子元素并传递标识属性 #

这是最直接的方案，父组件通过React.Children.map和React.cloneElement给子组件注入标识属性，子组件根据该属性应用对应样式：

import React from 'react';

export let ParentA = ({ children }) => {
  const modifiedChildren = React.Children.map(children, child => {
    return React.cloneElement(child, { parentType: 'a' });
  });
  return <ul data-parent-a>{modifiedChildren}</ul>;
};

export let ParentB = ({ children }) => {
  const modifiedChildren = React.Children.map(children, child => {
    return React.cloneElement(child, { parentType: 'b' });
  });
  return <ul data-parent-b>{modifiedChildren}</ul>;
};

export let Child = ({ children, parentType }) => {
  const childClass = parentType === 'a' ? 'child-a' : 'child-b';
  return <li data-child className={childClass}>{children}</li>;
};

方法二：使用React Context（适合深层嵌套场景） #

如果子组件嵌套在多层组件内部，克隆元素的方式不够灵活，可以用Context传递父组件标识：

import React, { createContext, useContext } from 'react';

const ParentContext = createContext(null);

export let ParentA = ({ children }) => {
  return (
    <ParentContext.Provider value="a">
      <ul data-parent-a>{children}</ul>
    </ParentContext.Provider>
  );
};

export let ParentB = ({ children }) => {
  return (
    <ParentContext.Provider value="b">
      <ul data-parent-b>{children}</ul>
    </ParentContext.Provider>
  );
};

export let Child = ({ children }) => {
  const parentType = useContext(ParentContext);
  const childClass = parentType === 'a' ? 'child-a' : 'child-b';
  return <li data-child className={childClass}>{children}</li>;
};

方法三：纯CSS解决方案（无需修改JS逻辑） #

如果只是需要样式区分，完全可以用CSS后代选择器实现，不需要修改任何组件代码：

/* 父组件A下的子组件样式 */
[data-parent-a] [data-child] {
  color: red;
  background-color: #f5f5f5;
}

/* 父组件B下的子组件样式 */
[data-parent-b] [data-child] {
  color: blue;
  background-color: #e8f4f8;
}

为什么你之前的尝试失败？ #

你在Child中创建Internal组件并传递ref的思路存在问题：

1. 普通函数组件默认不接收ref，需要用React.forwardRef包裹才能传递；
2. 即便拿到了Internal的ref，也和父组件没有关联——子组件无法主动获取父组件的ref，正确逻辑应该是父组件主动向子组件传递信息，或者用CSS选择器直接关联父子元素的样式。

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