将包装器组件作为ReactJS中的props传递

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

对于本机组件，您可以传递一个String，如下所示： <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的情况下混合功能。

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

`