Ответ 1

Вы можете использовать this.props.children для рендеринга любых дочерних элементов, содержащихся в компоненте:

const Wrap = props => <div>{props.children}</div>

export default () => <Wrap><h1>Hello word</h1></Wrap>

Ответ 2

Примечание. Я предоставил более подробный ответ здесь

Обертка времени выполнения:

Это самый идиоматический путь.

const Wrapper = ({children}) => (
  <div>
    <div>header</div>
    <div>{children}</div>
    <div>footer</div>
  </div>
);

const App = () => <div>Hello</div>;

const WrappedApp = () => (
  <Wrapper>
    <App/>
  </Wrapper>
);

Обратите внимание, что children является "специальной опорой" в React, а пример выше - синтаксический сахар и (почти) эквивалентен <Wrapper children={<App/>}/>

Оболочка инициализации /HOC

Вы можете использовать компонент более высокого порядка (HOC). Недавно они были добавлены в официальный официальный документ.

// Signature may look fancy but it just 
// a function that takes a component and returns a new component
const wrapHOC = (WrappedComponent) => (props) => (
  <div>
    <div>header</div>
    <div><WrappedComponent {...props}/></div>
    <div>footer</div>
  </div>
)

const App = () => <div>Hello</div>;

const WrappedApp = wrapHOC(App);

Это может привести к (небольшим) лучшим результатам, потому что компонент-обертка может коротко отстроить рендеринг на один шаг вперед с помощью mustComponentUpdate, в то время как в случае оболочки времени выполнения поддержка детей, вероятно, всегда будет другим ReactElement и вызовет re-render, даже если ваши компоненты расширяют PureComponent.

Обратите внимание, что connect для Redux использовался как оболочка среды выполнения, но был изменен на HOC, поскольку он позволяет избежать ненужных повторных рендеров, если вы используете опцию pure (которая по умолчанию истинна)

Вы не должны называть HOC во время фазы рендеринга, потому что создание компонентов React может быть дорогостоящим. Вы должны скорее называть эти обертки при инициализации.

Обратите внимание, что при использовании таких функциональных компонентов, как выше, HOC-версия не обеспечивает никакой полезной оптимизации, поскольку функциональные компоненты без состояния не реализуют shouldComponentUpdate

Дополнительные пояснения здесь: fooobar.com/questions/52935/...

Ответ 3

const ParentComponent = (props) => {
  return(
    {props.childComponent}
    //...additional JSX...
  )
}

//import component
import MyComponent from //...where ever

//place in var
const myComponent = <MyComponent />

//pass as prop
<ParentComponent childComponent={myComponent} />

Ответ 4

Facebook рекомендует использовать компонент без гражданства Источник: https://facebook.github.io/react/docs/reusable-components.html

В идеальном мире большинство ваших компонентов будут без гражданства функции, потому что в будущем хорошо также смогут сделать производительность оптимизации, специфичные для этих компонентов, избегая ненужных проверки и распределения памяти. Это рекомендуемая модель, когда возможно.

function Label(props){
    return <span>{props.label}</span>;
}

function Hello(props){
    return <div>{props.label}{props.name}</div>;
}

var hello = Hello({name:"Joe", label:Label({label:"I am "})});

ReactDOM.render(hello,mountNode);

Ответ 5

Я предпочитаю использовать встроенный API React:

import React, {cloneElement, Component} from "react";
import PropTypes from "prop-types";

export class Test extends Component {
  render() {
    const {children, wrapper} = this.props;
    return (
      cloneElement(wrapper, {
        ...wrapper.props,
        children
      })
    );
  }
}

Test.propTypes = {
  wrapper: PropTypes.element,
  // ... other props
};

Test.defaultProps = {
  wrapper: <div/>,
  // ... other props
};

то вы можете заменить div обертки тем, что вы хотите:

<Test wrapper={<span className="LOL"/>}>
  <div>child1</div>
  <div>child2</div>
</Test> 

Ответ 6

Вы можете передать его как обычный реквизит: foo={<ComponentOne/>}

Например:

const ComponentOne = () => <div>Hello world!</div>
const ComponentTwo = () => (
  <div>
    <div>Hola el mundo!</div>
    <ComponentThree foo={<ComponentOne />} />
  </div>
)
const ComponentThree = ({ foo }) => <div>{foo}</div>

Ответ 7

Вы можете передать компонент через. реквизит и сделать его с интерполяцией.

var DivWrapper = React.createClass({
    render: function() {
        return <div>{ this.props.child }</div>;
    }
});

Затем вы передали бы prop, называемый child, который будет компонентом React.

Ответ 8

Поздно к игре, но здесь мощный шаблон HOC для переопределения компонента, предоставляя его в качестве опоры. Это просто и элегантно.

Предположим, что MyComponent отображает вымышленный компонент A но вы хотите разрешить пользовательское переопределение A, в этом примере B, которое оборачивает A в <div>...</div> а также добавляет "!" к текстовой опоре:

import A from 'fictional-tooltip';

const MyComponent = props => (
  <props.A text="World">Hello</props.A>
);
MyComponent.defaultProps = { A };

const B = props => (
  <div><A {...props} text={props.text + '!'}></div>
);

ReactDOM.render(<MyComponent A={B}/>);

Ответ 9

Ниже приведен пример родительского компонента реагирования List, в котором реквизиты содержат элемент реагирования. В этом случае передается только один компонент реакции Link (как видно из рендера dom).

class Link extends React.Component {
  constructor(props){
    super(props);
  }
  render(){
    return (
      <div>
        <p>{this.props.name}</p>
      </div>
     );
  }
}
class List extends React.Component {
  render(){
   return(
    <div>
       {this.props.element}
       {this.props.element}
    </div>
   );
  }
}

ReactDOM.render(
  <List element = {<Link name = "working"/>}/>,
  document.getElementById('root')
);

Ответ 10

На самом деле, ваш вопрос заключается в том, как написать компонент высшего порядка (HOC). Основная цель использования HOC - предотвращение копирования. Вы можете написать свой HOC как чисто функциональный компонент или как класс, вот пример:

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

Если вы хотите написать свой родительский компонент как компонент на основе классов:

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

Если вы хотите написать своего родителя как функциональный компонент:

    const Parent=props=>{
    return(
        <div>
            {props.children}
        </div>
    )
}