將包裝器組件作為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')
);

`