ReactJS에서 래퍼 구성 요소를 소품으로 전달

Question

래퍼 구성 요소를 소품으로 전달하려고합니다. 이게 기술적으로 React에서 가능한 것입니까?

import React, {Component, PropTypes} from 'react'; 
import ChildComp from './child-comp'; 

class Comp extends Component { 
    render() { 
    const { Wrapper } = this.props; 
    return (
     <Wrapper> 
     <ChildComp /> 
     </Wrapper> 
    ); 
    } 
} 

Comp.propTypes = {}; 

export default Comp; 

Answer 1

예, 그것은 완벽하게 가능하고, 일반적으로 사용되는 것입니다. JSX에서 대문자로 된 단어는 관례대로 사용자가 정의한 구성 요소를 의미하므로 속성을 소문자로 만들어야하고 구성 요소의 참조를 유지하는 데 사용되는 변수를 대문자로 사용해야합니다.

import React from 'react'; 

function HelloWorld() { 
    return (
    <span> 
     <Foo wrapper={Bar}/> 
     <Foo wrapper="h5"/> 
    </span> 
); 
} 

class Bar extends React.Component { 
    render() { 
    return <h1>{this.props.children}</h1> 
    } 
} 

class Foo extends React.Component { 
    render() { 
    // the variable name must be capitalized 
    const Wrapper = this.props.wrapper; 
    return (
     <Wrapper><p>This works!</p></Wrapper> 
    ); 
    } 
} 

네이티브 구성 요소의 경우 다음과 같이 문자열을 전달할 수 있습니다. <Foo wrapper="h1"/>. JSX이 React.createElement('h1',props, children)

Answer 2

여러 가지 방법으로 구성 요소를 래핑 할 수 있습니다. 그러나, 가장 일반적으로는 다음과 같습니다 아이들을 렌더링 할 때

1. 아이들에게

렌더링의 jsx 명시 적으로 포장 구성 요소를 사용

<Wrapper> 
    <Child /> 
</Wrapper> 

과를 Wrapper 구성 요소는 외모와 같은 :

export default class Wrapper extends Component { 
    render() { 
    return (
     <div> 
     { this.props.children } 
     </div> 
    ); 
    } 
} 

2. 상위 구성 요소

고차원 구성 요소 (HOC)는 jsx 마크 업을 반드시 변경하지 않고도 기능을 혼합하는 방법입니다. jsx는 변경할 수 있지만 jsx를 변경하지 않고 기능을 혼합 할 수도 있습니다.

const Wrapped = Wrapper(Child); 

... 

<Wrapped /> 

을 그리고 같은 HOC 자체가 보일 것이다 : 다음 HOC을 사용하여

은 다음과 같습니다

export default Child => class extends Component { 
    render() { 
    return (
     <div> 
     <Child /> 
     </div> 
    ); 
    } 
} 

Answer 3

https://codepen.io/keshav1706/pen/eWMZwL?editors=0010

단지 구문 설탕 여기에 간단한 솔루션에 대한 codepen 때문에이 작동합니다. `

class ComponentOne extends React.Component { 
    render() { 
    return(
     <div> 
     <h1>Component One</h1> 
     <div>{this.props.children}</div> 
     </div> 
    ) 
    } 
} 

class ComponentTwo extends React.Component { 
    render() { 
    return(
     <h4>hello</h4> 
    ) 
    } 
} 
class ComponentThree extends React.Component { 
    render() { 
    return(
     <h4>component three</h4> 
    ) 
    } 
} 
ReactDOM.render(
    <div> 
     <ComponentOne> <ComponentThree/></ComponentOne> 
    </div>, 
    document.getElementById('root') 
); 

`