将包装器组件作为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)