如何将字符串呈现为自定义 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】:

正如评论部分提到的,我首先要创建一个&lt;App /&gt; 组件并在那里处理要在屏幕上呈现的组件。这不会根据您的评论呈现您可能期望的所有组件。

例如,在基于string 值的&lt;App /&gt; 组件中,您可以渲染不同的组件。这个string 值可以用button 组件的onClick 处理程序来操作,我留给你如何处理。

&lt;App /&gt; 的主要组件将如下所示:

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 中,我如何从组件的字符串表示中呈现组件?

Application Insights - ILogger 参数呈现为自定义维度中的对象名称

为啥我不能将其转换为自定义的 React 钩子?

如何将箭头控件设置为自定义按钮

如何将时间字符串转换为自定义日期格式?

当 minifyEnabled 为 true 时,如何将 JSON 字符串转换为自定义对象?