Передайте компонент обертки как реквизит в ReactJS

Question

Я пытаюсь передать компонент обертки в качестве реквизита. Что-то вроде этого технически возможно в реактиве?

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, но вы также можете использовать функции mixin без изменения 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') 
); 

`