유형 스크립트 반응에서 구성 요소의 하위 항목을 반복하는 방법은 무엇입니까?

유형 스크립트 반응에서 구성 요소의 하위 항목을 반복하는 방법은 무엇입니까?

Typescript tsx에서 React 구성 요소의 자식을 통해 반복하는 방법은 무엇입니까?

다음은 유효한 jsx입니다.

public render() {
    return (
        <div>
            {React.Children.map(this.props.children, x => x.props.foo)}
        </div>
    );
}

그러나 유형 스크립트에서 x의 유형은 다음과 같습니다.React.ReactElement<any>저는 소품을 접할 수 없습니다.제가 해야 할 캐스팅이 있나요?

사용.any유형 정보를 잃어버리므로 일반적으로 피해야 합니다.

대신 사용React.ReactElement<P>함수 매개변수 유형:

React.Children.map(this.props.children, (child: React.ReactElement<ChildPropTypes>) => child.props.bar)

그러나 유형 스크립트에서 x의 유형은 반응입니다.소품에 접근할 수 없도록 요소를 반응시킵니다.제가 해야 할 캐스팅이 있나요?

네. 또한 그 용어를 선호합니다.assertion간단한 것:

React.Children.map(this.props.children, x => (x as any).props.foo)

import React, {FC, Children, isValidElement } from "react"



 const MyComponent: FC = ({children}) => {
    // define component logic
    return ( 
    // children is a prop that passed to the component
    // second arg is a callback
    { Children.map(children, child => {
              // if child is a valid element, we can set attributes
              // you might need to add attributes dynamically
              if (isValidElement(child)) {
                return {
                  ...child,
                  props: {
                    ...child.props,
                    className:"Add className here"
                  }
                }
               }
              // if element is not valid just return child
              return child
    })

언급URL : https://stackoverflow.com/questions/34030328/how-to-iterate-through-a-components-children-in-typescript-react