리액트 컴포넌트를 소품으로 사용

리액트 컴포넌트를 소품으로 사용

예를 들어 다음과 같습니다.

import Statement from './Statement';
import SchoolDetails from './SchoolDetails';
import AuthorizedStaff from './AuthorizedStaff';

const MultiTab = () => (
  <Tabs initialIndex={1} justify="start" className="tablisty">
    <Tab title="First Title" className="home">
      <Statement />
    </Tab>
    <Tab title="Second Title" className="check">
      <SchoolDetails />
    </Tab>
    <Tab title="Third Title" className="staff">
      <AuthorizedStaff />
    </Tab>
  </Tabs>
);

Tabs 컴포넌트 내에서this.props속성을 가지고 있습니다.

+Children[3]
className="tablist"
justify="start"

Children[0](this.props.children)은 다음과 같이 됩니다.

$$typeof:
Symbol(react.element)
_owner:ReactCompositeComponentWrapper
_self:null
_shadowChildren:Object
_source:null
_store:Object
key:null
props:Object
ref:null
type: Tab(props, context)
__proto__
Object

[ Children [ 0 。소품들은 마치

+Children (one element)
className="home"
title="first title"

마지막으로 Children 객체는 다음과 같습니다.

$$typeof:Symbol(react.element)
_owner:ReactCompositeComponentWrapper
_self:null
_shadowChildren:undefined
_source:null
_store:
key:null
props:Object
__proto__:Object
**type: function Statement()**
ref:null

문제는 MultiTab을 이렇게 다시 쓰면

<Tabs initialIndex={1} justify="start" className="tablisty">
  <Tab title="First Title" className="home" pass={Statement} />
  <Tab title="Second Title" className="check" pass={SchoolDetails} />
  <Tab title="Third Title" className="staff" pass={AuthorizedStaff} />
</Tabs>;

탭 구성 요소 내부

this.props.children위와 같은 모양입니다.

children[0].props처럼 보인다

classname:"home"
**pass: function Statement()**
title: "First title"

나는 그 것을 원한다.pass닮을 수 있는 자산입니다.위는 문장 기능만 출력합니다.

$$typeof:Symbol(react.element)
_owner:ReactCompositeComponentWrapper
_self:null
_shadowChildren:undefined
_source:null
_store:
key:null
props:Object
__proto__:Object
**type: function Statement()**
ref:null

이건 이상한 질문이지만, 제가 도서관을 이용하고 있는 긴 이야기이고, 결론은 이렇습니다.

사용.this.props.children인스턴스화된 컴포넌트를 반응 컴포넌트에 전달하는 관용적인 방법입니다.

const Label = props => <span>{props.children}</span>
const Tab = props => <div>{props.children}</div>
const Page = () => <Tab><Label>Foo</Label></Tab>

컴포넌트를 파라미터로 직접 전달하면 해당 컴포넌트를 인스턴스화하지 않고 전달하고 소품에서 컴포넌트를 인스턴스화합니다.이것은 컴포넌트 클래스를 전달하기 위한 관용적인 방법입니다.이러한 클래스는 트리의 컴포넌트에 의해 인스턴스화 됩니다(예를 들어 컴포넌트가 태그의 커스텀 스타일을 사용하는 경우).다만, 그 태그가 사용자 정의인지 아닌지를 선택할 수 있도록 하고 싶습니다.div또는span):

const Label = props => <span>{props.children}</span>
const Button = props => {
    const Inner = props.inner; // Note: variable name _must_ start with a capital letter 
    return <button><Inner>Foo</Inner></button>
}
const Page = () => <Button inner={Label}/>

어린이와 같은 파라미터를 소품으로 전달하려면 다음과 같이 할 수 있습니다.

const Label = props => <span>{props.content}</span>
const Tab = props => <div>{props.content}</div>
const Page = () => <Tab content={<Label content='Foo' />} />

즉, React의 속성은 일반적인 JavaScript 객체의 속성일 뿐이며 문자열, 함수, 복잡한 객체 등 모든 값을 유지할 수 있습니다.

접수된 답변에 기재된 바와 같이 특별한 {propos.children} 속성을 사용할 수 있습니다.단, 제목에 따라 컴포넌트를 소품으로 전달할 수 있습니다.여러 개의 컴포넌트를 통과시켜 다른 장소에 렌더링하는 것이 좋을 수 있기 때문에 이 방법이 더 깔끔할 수 있다고 생각합니다.다음은 react docs와 그 방법의 예를 제시하겠습니다.

https://reactjs.org/docs/composition-vs-inheritance.html

오브젝트가 아닌 컴포넌트를 실제로 전달하고 있는지 확인합니다(처음에는 이 동작에 걸려 넘어졌습니다.

코드는 다음과 같습니다.

const Parent = () => { 
  return (
    <Child  componentToPassDown={<SomeComp />}  />
  )
}

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {componentToPassDown}  
    </>
  )
}

렌더 소품을 사용하면 함수를 컴포넌트로 전달할 수 있으며 상위 소품도 공유할 수 있습니다.

<Parent
  childComponent={(data) => <Child data={data} />}
/>

const Parent = (props) => {
  const [state, setState] = useState("Parent to child")

  return <div>{props.childComponent(state)}</div>
}

컴포넌트를 조건부로 렌더링해야 했기 때문에 다음과 같은 도움이 되었습니다.

const Parent = () => { 
  return (
    <Child  componentToPassDown={<SomeComp />}  />
  )
}

const Child = ({ componentToPassDown }) => { 
  return (
    <>
     {conditionToCheck ? componentToPassDown : <div>Some other code</div>}
    </>
  )
}

내 경우 컴포넌트(type_of_)를 몇 개 쌓아두었습니다.Function Component)를 다음과 같은 오브젝트로 만듭니다.

[
 {...,one : ComponentOne},
 {...,two : ComponentTwo}
]

애니메이션 슬라이더에 넣고 슬라이드 컴포넌트에서 다음을 수행했습니다.

const PassedComponent:FunctionComponent<any> = Passed;

그 후 사용합니다.

<PassedComponent {...custom_props} />

React 패키지의 "React.createElement(컴포넌트, 소품)"를 사용하면 어떨까요?

const showModalScrollable = (component, props) => {
 Navigation.showModal({
   component: {
     name: COMPONENT_NAMES.modalScrollable,
     passProps: {
        renderContent: (componentId) => {
          const allProps = { componentId, ...props };

          return React.createElement(component, allProps);
    },
  },
},

}); };

언급URL : https://stackoverflow.com/questions/39652686/pass-react-component-as-props