구성 요소는 레이아웃 제약 조건을 충족하기 위해 자식에 대한 가정을 원할 수 있습니다. 이 사용자 정의 후크는 특정 유형의 중첩된 자식이 있는지 확인하고 렌더링하는 동안 레이아웃 제약 조건을 적용하기 위해 중첩된 자식 자체를 반환하는 데 도움이 됩니다.

용법

import useChild from 'use-child';

const Car = props => {
  const [wheelExists, WheelComponent] = useChild(props.children, Wheel);
  const [engineExists, EngineComponent] = useChild(props.children, Engine);

  return (
    <div>
      {wheelExists && WheelComponent}
      {engineExists && EngineComponent}
    </div>
  );
};

const Wheel = () => {
  return <div>I am a wheel</div>;
};

const Engine = () => {
  return <div>I am an engine</div>;
};

ozan yurtsever / use-child

중첩된 하위 구성 요소 유형을 확인하는 사용자 정의 반응 후크

use-child

React hook for getting the type of any nested child component

구성 요소는 레이아웃을 충족하기 위해 자식에 대한 가정을 원할 수 있습니다.
제약. 이 사용자 정의 후크는 특정 유형의 중첩된 자식이 있는지 확인하고 렌더링하는 동안 레이아웃 제약 조건을 적용하기 위해 중첩된 자식 자체를 반환하는 데 도움이 됩니다.

설치

npm install use-child

용법

import useChild from 'use-child';
const Car = props => {
  const [wheelExists, WheelComponent] = useChild(props.children, Wheel);
  const [engineExists, EngineComponent] = useChild(props.children, Engine);

  return (
    <div>
      {wheelExists && WheelComponent}
      {engineExists && EngineComponent}
    </div>
  );
};

const Wheel = () => {
  return <div>I am a wheel</div>;

…


View on GitHub