如何将字符串呈现为自定义 React 组件?
Posted
技术标签:
【中文标题】如何将字符串呈现为自定义 React 组件?【英文标题】:How to render string as custom React component? 【发布时间】:2020-05-31 03:03:27 【问题描述】:所以我有这个代码
ReactDom.render(<Home />, document.getElementById("main"));
这完美地工作并且它呈现 Home 组件。 我想让这段代码动态 代替 Home 组件,它可以是任何组件,例如 Apartment 或 Building 组件。
我已经尝试通过以下代码来做到这一点。
const tag = `<$main />`;
ReactDom.render(tag, document.getElementById("main"));
这不起作用。
我想知道这是否可能。我宁愿在没有任何第三方库的情况下这样做。
【问题讨论】:
你为什么不制作一个应用程序组件并让它渲染家庭、建筑物或公寓? @Domino987 我不想一次渲染所有组件。将其视为条件渲染。我想我可以使用开关,但我必须硬编码 CASE 值。 我们能知道这样渲染的目的/案例吗 @SumanthMadishetty onClick 我想根据onClickHandler('value')传递的字符串来渲染不同的组件 这听起来很适合使用 react-router,也许这会有所帮助:reacttraining.com/react-router/web/guides/quick-start 【参考方案1】:正如评论部分提到的,我首先要创建一个<App />
组件并在那里处理要在屏幕上呈现的组件。这不会根据您的评论呈现您可能期望的所有组件。
例如,在基于string
值的<App />
组件中,您可以渲染不同的组件。这个string
值可以用button
组件的onClick
处理程序来操作,我留给你如何处理。
<App />
的主要组件将如下所示:
import React, useState from 'react';
// import other components
function App()
const [current, setCurrent] = useState('home');
if (current === 'home') return <Home />
else if (current === 'contact') return <Contact />
else return <DifferentComponent />
export default App;
index.js 如下所示:
ReactDOM.render(<App />, document.getElementById('root'));
最后,您可以在 return
中创建不同的按钮,您可以在其中调用 setCurrent
来操作要渲染的按钮。
或者正如我在 cmets 中建议的第二个选项,您可以使用 react-router,这将帮助您根据当前路由渲染不同的组件。如果您想实现这一目标,请查看这里的 quick start training。
我希望这个解释有帮助!
【讨论】:
谢谢。我在我的应用程序中使用 react-router【参考方案2】:您可以创建一个组件来呈现您在状态中设置的每个名称,这将根据您的道具呈现您可能期望的所有组件。
例如你可以写这个组件:Render.js
import React, useState from 'react';
// import other components
export default (props) =>
const [current, setCurrent] = useState('home');
const App=
home: Home,
apartment: Apartment ,
building: Building,
...
;
let Render = App[current] || Home;
return <Render ...props />;
;
index.js 如下所示:
ReactDOM.render(<Render/>, document.getElementById('root'));
【讨论】:
以上是关于如何将字符串呈现为自定义 React 组件?的主要内容,如果未能解决你的问题,请参考以下文章
在 React.js 中,我如何从组件的字符串表示中呈现组件?