在ReactJS中将包装器组件作为道具传递

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

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

`

Answer 2

可以通过多种方式包装组件。然而，最常见的是：

1. 给孩子

呈现子对象时，jsx显式使用包装组件：

<Wrapper>
  <Child />
</Wrapper>

而包装器组件如下所示：

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

高阶组件（HOC）是一种在不必更改jsx标记的情况下混合功能的方法。您可以更改jsx，但也可以在不更改jsx的情况下混合功能。

使用HOC看起来像这样：

const Wrapped = Wrapper(Child);

...

<Wrapped />

而HOC本身看起来就像：

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

Answer 3

是的，完全可以，而且常用。唯一的问题是，作为一种惯例，在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，就像这样：