React/JSX 动态组件名称

IT技术 javascript reactjs react-jsx
2021-03-23 21:37:23

我正在寻找基于字符串呈现组件。本质上，我希望找到与 JavaScript 的动态函数命名能力 ( parent["childMethod"])等效的 JSX 。

那么，如果我有一个字符串，比如"<MyComponent />"，我怎么能变成 JSX 并渲染呢？

1个回答

JSX 只是一个很好的函数调用语法，所以你需要有实际的函数来使用一个组件。如果您有一个包含 React 组件的对象，那么您可以根据字符串属性渲染一个组件。例如，如果您有一个名为 MyComponents 的对象（对于 JSX 必须是大写）并且该对象具有 React 组件，例如MyComponents.SomeInput = React.CreateClass(...). 然后你可以<MyComponents.SomeInput />在你的 JSX 中使用。

我遇到同样的问题，但var ContentBlocks = { info : require('./Infoblock'), portrait : require('./Portraitblock') };并<ContentBlocks['info']>抛出一个错误
2021-05-28 21:37:23
我刚刚检查过，您是对的，您可以使用<ContentBlocks.info>或替代var MyComponent = MyComponents['info'];，<MyComponent>如果您在编写密钥时不知道密钥。
2021-06-04 21:37:23
其它你可能感兴趣的问题
上一篇如何在不使用 MUIThemeProvider 的情况下覆盖 material-ui TextField 组件的样式？ 下一篇React 中对象中的双管的目的是什么