Component just rendering component from props

eccyan — Thu, 16 Nov 2017 10:28:08 +0000

I wrote the component this like:

import React from 'react';
import PropTypes from 'prop-types';

class Renderer extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return React.createElement(this.props.component, this.props);
  }

  static propTypes = {
    component: PropTypes.element.isRequired,
  };
}

export default Renderer;

This component can be used like this:

import Renderer from './components/renderer'
import AwesomeComponent from './components/awesome_component'
import hoc from './components/awesome_hoc'

() => {
  render <Renderer component={hoc(AwesomeComponent)} />;
}

The reason why I use <Renderer /> is I don't want using React.createElement in JSX.
And I should not define useless constants like this:

import Renderer from './components/renderer'
import AwesomeComponent from './components/awesome_component'
import hoc from './components/awesome_hoc'

() => {
  const HocComponent = hoc(AwesomeComponent);
  render <HocComponent />;
}

Does anyone know the name of such this component?

I am a DEV

eccyan — Wed, 15 Nov 2017 10:11:05 +0000

I am a DEV.

DEV Community: eccyan

Component just rendering component from props

I am a DEV