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

Я пытаюсь передать компонент оболочки как реквизит. В 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;

Ответы

Ответ 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)

Ответ 2

Вы можете обернуть компоненты несколькими способами. Однако наиболее распространенными являются:

Рендеринг детей

При рендеринге детей jsx явно использует компонент упаковки:

<Wrapper>
  <Child />
</Wrapper>

и компонент Wrapper выглядит следующим образом:

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

Компонент более высокого порядка

Компонент более высокого порядка (HOC) - это способ комбинирования функций без необходимости изменения разметки jsx. Вы можете изменить jsx, но вы также можете использовать функции mixin без изменения jsx.

Использование HOC выглядит следующим образом:

const Wrapped = Wrapper(Child);

...

<Wrapped />

И сама HOC будет выглядеть так:

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

Ответ 3

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

здесь код для простого решения. `

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')
);