如何将字符串呈现为自定义 React 组件？

Posted 2023-02-23

【中文标题】如何将字符串呈现为自定义 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'));