Definitelytyped: React.Children.map() 및 React.cloneElement() 예제 필요

풀 리퀘스트를 보내주세요. 검토하겠습니다.

@vvakame 할 수 없습니다. 작동 방식을 이해하지 못합니다.

저도 요. 정의 작성자와 대화를 나누십시오.

핑 @vsiao @thasner @basarat @pspeter3 @beckend

다음을 기반으로 하는 Ping/작성자 목록:

• https://github.com/DefinitelyTyped/DefinitelyTyped/blame/b8c6cce44415475000bf3a712112978f958fe5ee/react/react-tests.ts#L451
• https://github.com/DefinitelyTyped/DefinitelyTyped/blame/b8c6cce44415475000bf3a712112978f958fe5ee/react/index.d.ts#L2390
• https://github.com/DefinitelyTyped/DefinitelyTyped/blame/b8c6cce44415475000bf3a712112978f958fe5ee/react/react-tests.ts#L188

this.props.children 에 ReactElement가 아닌 값이 포함되어 있지 않다는 보장이 없기 때문에 명시적으로 checkbox 유형 주석을 추가하거나 유형 주장해야 합니다. 예를 들어:

React.Children.map(this.props.children, (checkbox: React.ReactElement<CheckboxProps>) => 
    React.cloneElement(checkbox) // should be ok
);

@vsiao thx 많이, 작동합니다!

질문:

const checkboxes = React.Children.map(this.props.children, checkbox =>
  React.cloneElement(checkbox, {
    name: this.props.name,
    checked: this.props.checkedValues.includes(checkbox.props.value),
    onChange: this.handleCheckboxChange.bind(this)
  })
);

해결책:

const checkboxes = React.Children.map(props.children, (checkbox: React.ReactElement<CheckboxPropsInternal>) =>
  React.cloneElement(checkbox, {
    checked: props.checkedValues.includes(checkbox.props.value),
    onChange: handleCheckboxChange
  })
);

@tkrotoff 당신은 또한

    React.Children.map(this.props.children, (child: number) => {
      return child + 1
    })

이 솔루션과 제안된 솔루션은 React.Children.map 가 강력한 형식이 아니라는 사실을 이용하고 있습니다. Checkbox 유형 대신 any 를 사용했을 수도 있습니다. 왜냐하면 그것이 자식 유형이 될 것이라는 보장이 없기 때문입니다. 이것은 누군가 문자열을 전달하여 구성 요소를 잘못 사용하는 경우 런타임 오류가 발생할 가능성이 있음을 의미합니다.

이것은 어떤가요:

class Slot extends React.PureComponent {
  render () {
    return this.props.children
  }
}

const isReactElement = (obj: {}): obj is React.ReactElement<{}> => {
  return obj.hasOwnProperty('type')
}

const isSlot = (obj: {}): obj is Slot => {
  return isReactElement(obj) && obj.type === Slot
}

const getSlots = (children: React.ReactNode) => React.Children.map(children, (child: React.ReactChild): JSX.Element | null => {
  if (isReactElement(child) && isSlot(child)) {
    return child
  }

  return null
})

class ComponentWithSlots extends React.PureComponent {
  render () {
    const [header, footer] = getSlots(this.props.children)

    return (
      <div>
        {header}
        <div>
          <h1>Welcome</h1>
          <p>This is my lovely component with slots</p>
        </div>
        {footer}
      </div>
    )
  }
}

class MyComponent extends React.PureComponent {
  render () {
    return (
      <ComponentWithSlots>
        <Slot>My Header!</Slot>
        <Slot>
          <div>github: @variousauthors</div>
        </Slot>
      </ComponentWithSlots>
    )
  }
}

다음을 렌더링합니다.

My Header!
Welcome
This is my lovely component with slots

github: <strong i="17">@variousauthors</strong>

이 접근 방식은 ReactChild 가 ReactElement 수 있다는 _do_ 유형 정보를 활용합니다(이를 감지하기 위해 type 를 사용했지만, 원한다면 더 조심하십시오). 우리는 또한 Slot 대해 더 설명적이고 정교하게 만들 수 있습니다. UI 라이브러리가 클래스에 자체 슬롯이 연결된 패턴을 구현하는 것을 보았습니다. 다음과 같은 것:

<Dropdown>
  <Dropdown.Header>
    <FancyIcon>My Header!</FancyIcon>
  </Dropdown.Header>
  {dropdownItems}
</Dropdown>

이렇게 하면 사용자는 각 슬롯의 의미를 명확하게 알 수 있습니다. 나머지 자식(슬롯으로 구문 분석되지 않음)은 children 라는 컬렉션에 남겨지고 개별 카트를 렌더링하여 사용자가 children 정상적으로 사용할 수 있도록 하고 사용자 정의 슬롯.

편집 : 분명히있다 반작용하는 방법 React.isValidElement 당신이 내 사용자 지정 대신에 사용할 수있는 isReactElement .

편집: 할 수 있는 다른 일은 구성 요소에 children 속성을 입력하여 사용자가 체크박스를 자식으로만 전달할 수 있도록 하는 것입니다. 이렇게 하면 런타임 오류를 방지하는 데 도움이 됩니다.