javascript - 在 ReactJS 中将包装器组件作为 props 传递

Question

我正在尝试将包装器组件作为 Prop 传递。在 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>
    );
  }
}

对于 native 组件，您可以传递一个字符串，如下所示:<Foo wrapper="h1"/> .这是可行的，因为 JSX 只是 React.createElement('h1',props, children) 的语法糖