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

时间:2021-05-21 04:32:09

标签: javascript reactjs typescript frontend react-props

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

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

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

1 个答案:

答案 0 :(得分:4)

您可以使用 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