动态渲染React组件而不使用邪恶的eval

const MyComponent = React.createElement('div', { className: 'my-component' }, 'Hello, World!');
ReactDOM.render(MyComponent, document.getElementById('root'));

const code = `
  const MyComponent = <div className="my-component">Hello, World!</div>;
  ReactDOM.render(MyComponent, document.getElementById('root'));
`;
eval(code);

const components = {
  ComponentA: () => <div>Component A</div>,
  ComponentB: () => <div>Component B</div>,
};

const MyComponent = ({ componentName }) => {
  const Component = components[componentName];
  return <Component />;
};

ReactDOM.render(<MyComponent componentName="ComponentA" />, document.getElementById('root'));