Question

我正在尝试克隆组件的一个子组件并向其添加一些道具。但是这个组件的一些孩子是他们自己的孩子。正因为如此，新的 props 不会被克隆到它或它的孩子。

const component = () => {
      const child = componentProp(value, setValue);
      if (React.isValidElement(child)) {
        return React.cloneElement(child as any, {
          onBlur: onFocusChange,
          inputRef: searchInput,
        });
      }
      return child;
    };

我如何检查孩子是否有孩子以确保我确实可以将道具添加到正确的级别？

Answer 1

您可以使用 React.Children.count(children) API

<块引用>

返回子组件中的组件总数，等于传递给 map 或 forEach 的回调将被调用的次数。

例如

App.tsx：

import { Parent } from "./Parent";

export default function App() {
  return (
    <div className="App">
      <Parent
        child2={null}
        child={
          <div>
            <span>item1</span>
            <span>item2</span>
          </div>
        }
      />
    </div>
  );
}

Parent.tsx：

import React from "react";

export const Parent = ({ child, child2 }: any) => {
  console.log("child:", React.Children.count(child));
  console.log("child2: ", React.Children.count(child2));
  return child;
};

控制台输出：

child: 1
child2: 0

如何检查组件孩子是否有孩子？

1 个答案: