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

【问题标题】：How to render string as custom React component?如何将字符串呈现为自定义 React 组件？
【发布时间】：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

标签： javascript reactjs react-native components jsx

【解决方案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'));

【讨论】：