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

Question

我是ReactJs的新手。请不要拒绝我的问题。

所以我有这个代码

ReactDom.render(<Home />, document.getElementById("main"));

这完美工作，并且呈现Home组件。我想使此代码动态化而是Home组件，它可以是任何组件，例如Apartment或Building组件。

我已经尝试通过以下代码来做到这一点。

const tag = `<${main} />`;
ReactDom.render(tag, document.getElementById("main"));

这不起作用。

我想知道是否有可能。我希望没有任何第三方库就可以这样做。

Answer 1

我将在注释部分中提到的要做的是首先创建一个<App />组件并在那里处理要在屏幕中呈现的组件。这不会根据您的评论呈现所有组件。

例如，在基于<App />值的string组件中，您可以渲染不同的组件。可以使用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以操纵要渲染的按钮。

或者正如我在评论中建议的那样，使用第二个选项，您可以使用react-router，这将帮助您根据当前路径渲染不同的组件。如果您愿意的话，可以在这里看看这个好quick start training。

我希望这个解释有帮助！