대응: 상위 컴포넌트의 하위 매핑

대응: 상위 컴포넌트의 하위 매핑

따라서 구성요소에 추가된 모든 하위 항목에 특정 스타일을 추가합니다.부모 컴포넌트가 호출되었다고 칩시다.Section그리고 아이들은 불려진다.Card이 경우는,에Section.js나는 이것을 시도하고 있다:-

renderChildren = () =>{
  return React.Children.map(this.props.children, (child, i)=>{
    let el = React.cloneElement(child,{
      style: {opacity:0.5}
    })
    return el
  })
}

render(){
  <ScrollView>
       {this.renderChildren()}
   </ScrollView>
}

위의 접근법은 나에게 통하지 않는다.그리고 나는 이유를 알고 싶다.또한 아이들을 지도화하여 새로운 컴포넌트로 포장할 수 있는 방법이 있습니까?이런 느낌이에요.

this.props.children.map(Child => <Wrapper> <Child/> </Wrapper> )

아이를 포장지에 싸려면 다음 주소로 전화를 걸기만 하면 됩니다.React.Children.map래퍼 컴포넌트에 넣습니다.

const OpaqueWrapper = ({ children }) => (
    // check that children is defined 
    // if you do not want your wrapper to be rendered empty
    children && (
        <Wrapper>
            {React.Children.map(children, child => (
                React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})
            ))}
        </Wrapper>
    )
);

또한 원래 하위 항목에 제공된 스타일을 삽입된 스타일과 병합해야 합니다. 그렇지 않으면 하위 항목을 스타일링할 수 없습니다.

동작 예에 대해서는, 이 코드와 상자를 참조해 주세요.

코드로 동작하지 않는 이유:정말?<Card>컴포넌트에서는style올바른 지지대, 즉 자녀에게 적용하는 것?

편집:

sloution은 모든 어린이 컴포넌트를 하나의 래퍼로 감싸지만, 제 질문에서 보듯이 각 어린이 컴포넌트를 적용된 래퍼로 감싸고 싶습니다.

포장지를 이동시켜 주세요.React.Children.map:

const OpaqueWrapper = ({ children }) => (        
    React.Children.map(children, child => (
       <Wrapper>
           {React.cloneElement(child, {style: {...child.props.style, opacity: 0.5}})}
       </Wrapper>
    )))
);

나는 이 솔루션이 모든 아이들을 싸는 가장 간단한 방법이라고 생각한다.하위 항목이 렌더링되면 구성요소 함수가 아닌 구성요소의 인스턴스를 받게 됩니다.아래 그림과 같이 인스턴스를 래퍼 컴포넌트로 랩하기만 하면 됩니다.

this.props.children.map(child => <Wrapper>{child}</Wrapper> )

TypeScript의 경우:

React.Children.map(props.children, child => {
  return <Wrapper>{child}</Wrapper>
})

다음은 속성을 쓸 때의 Typescript 버전입니다.

  const mapped = Children.map(children, (child, index) => {
    if(React.isValidElement(child)) {
      return React.cloneElement(child, {
        ...child.props,
        isFirst: index === 0,
        isLast: !Array.isArray(children) || index === children.length - 1,
      })
    }
    return null
  })

TypeScript의 또 다른 변종은 깨끗한 것 같습니다.

const ChildrenWithProps = Children.map(children, child =>
    cloneElement(child as JSX.Element, props),
)

다음과 같이 사용됩니다.

return (
  <div>
    {ChildrenWithProps}
  </div>
);

물론, 당신은 사전에 무엇이 전달되는지 알아야 합니다.children반드시 유효한 자 요소가 됩니다.그렇지 않으면 이전 답변대로 isValidElement를 사용하여 확인해야 합니다.

언급URL : https://stackoverflow.com/questions/49496906/react-mapping-children-of-a-parent-component