javascript - 访问 react 元素的 child

Question

想象一下有 React 组件

function List() {
   return (<ul>
             <li>1</li>
             <li>2</li>
           </ul>
    );
}

我想创建高阶组件来修改，例如，所有 li 节点的样式。

function makeRed(component) {
    return function(props) {
         const element = React.createElement(component, props);

         return React.cloneElement(
            element,
            element.props,
            React.Children.map(
                element.props.children,
                ch => React.cloneElement(ch, { 
                        ...ch.props, 
                        style: {
                           backgroundColor: "red"
                        }
                    },                    
                    ch.props.children
                )
            )
        );
    }
}

但是。这是行不通的。 child 是空的。

有趣的是，如果我直接创建组件，这会起作用，比如

...    
const element = <ul><li>1</li><li>2</li></ul>;
...

问题:如何访问任何 React 元素的子元素和孙元素？

Answer 1

正如@hamms 所指出的，这是一种反模式。有better ways to implement themes in React使用普通的旧 CSS。

也就是说，这是对您的用例的一个有效示例的破解 - https://codesandbox.io/s/ymqwyww22z .

基本上，这是我所做的:

1. 制作List基于类的组件。将功能组件包装成一个并不太麻烦。

   import React, { Component } from "react";
   
   export default class List extends Component {
     render() {
       return (
         <ul>
           <li>1</li>
           <li>2</li>
         </ul>
       );
     }
   }
   

2. 实现 render在动态类中 Red<Component>首先获取从基本组件的渲染返回的元素树，然后对其进行编辑。

   import React from "react";
   
   export default function makeRed(Component) {
     return class RedComponent extends Component {
       constructor(props) {
         super(props);
   
         RedComponent.displayName = `Red${Component.name}`;
       }
   
       render() {
         let componentElement = super.render();
         let { children, ...rest } = componentElement.props;
         children = React.Children.map(children, child => {
           return React.cloneElement(child, {
             ...child.props,
             style: {
               backgroundColor: "red"
             }
           });
         });
         return React.cloneElement(componentElement, rest, ...children);
       }
     };
   }
   

这与 createElement 有何不同？ makeRed 的版本？

作为makeRed当你在 App 中使用它时返回一个 HOC组件，你不分配 Prop 给它。像这样的……

function App() {
  return <RedList />; // no props!
}

所以在动态组件函数里面，你用createElement创建一个新实例，component.props不要带任何 child 。自 List创建自己的子项，你需要获取并修改它们，而不是从 props 中读取子项.