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?
Top comments (1)
I improved the example because the last example is hard to understand.