ReactJSでラッパーコンポーネントを渡す

Question

ラッパーコンポーネントをpropsとして渡そうとしています。このような何かが技術的に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

さまざまな方法でコンポーネントをラップできます。しかし、最も一般的なのは、次のとおりです。

<Wrapper> 
    <Child /> 
</Wrapper> 

とWrapperコンポーネントは次のようになります：

1. は子どもをレンダリングする場合、JSXは、明示的にラッピングコンポーネントを使用して、子どもたちに

をレンダリング

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

2. 高次コンポーネント

高次コンポーネント（HOC）は、jsxマークアップを必ずしも変更せずに機能をミックスする方法です。 jsxは変更できますが、jsxを変更せずに機能を混在させることもできます。 HOCを使用して

は次のようになります。

const Wrapped = Wrapper(Child); 

... 

<Wrapped /> 

そして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') 
); 

`