如何用React创建一个Tabs组件

Question

import { Home } from "./home";
const TABS = [
{
component: Home,
label: "Home"
}
];
export default class Tabs extends Component {
constructor(props) {
super(props);
this.state = {
"Home": {
isActive: true
}
}
}
checkIsActive = (evt) => {
const newState = {};
TABS.map(tab => {
if (evt.currentTarget.getAttribute("value") === tab.label) {
newState[tab.label] = { "isActive": true }
} else {
newState[tab.label] = { "isActive": false }
}
})
this.setState(newState);
}
render () {
return (
<>
<div className="constContainer">
<h1 className="title">Tabs</h1>
<div className="tabs">
{TABS.map(tab => {
if (this.state[tab.label].isActive === true) {
return React.createElement("p", { className: "tab active", value: tab.label, key: tab.label, onClick: this.checkIsActive }, tab.label);
}

return React.createElement("p", { className: "tab", value: tab.label, key: tab.label, onClick: this.checkIsActive }, tab.label);
})}
</div>
</div>
{TABS.map(tab => {
if (this.state[tab.label]["isActive"] === true) {
// HERE
}
})}
</>
)
}
}

我已经标记了我想用HERE返回组件的部分。我想使用TABS常量并使用组件键来有条件地呈现组件。当用户单击段落标记时，我想呈现组件。

下面是主文件中导入的主文件:

import React from "react";
export const Home = () => {
return (
<div className="pageContainer">
<h1 className="pageHeading">Home Page</h1>
<p className="pageContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas tellus ut sapien semper, dictum aliquet eros ultrices. Integer aliquet nulla nulla, quis sagittis erat venenatis in. Quisque at viverra urna. Proin ex nisi, pretium et posuere non, malesuada a metus. Donec est diam, efficitur eu lacus et, accumsan lobortis velit. Proin egestas tortor purus, nec congue sem tincidunt id. Mauris non urna sit amet augue varius posuere. Aliquam erat volutpat. Donec convallis pellentesque ipsum, id sodales quam ultricies non. Nullam et egestas quam, at hendrerit diam. Sed iaculis in arcu in sagittis. In eget nibh eget orci accumsan venenatis id ut mauris. Pellentesque sit amet porta lorem. Sed condimentum dignissim sollicitudin. Aliquam felis quam, dignissim in ante sed, iaculis congue nisl. Etiam sed est nunc.</p>
</div>
)
}

任何帮助都是感激的!

Answer 1

您可以简单地从TABS列表中提取组件并呈现它。这是一个tab组件的完整示例:

import { Home } from "./home";
const TABS = [
{
component: Home,
label: "Home"
}
];
export default class Tabs extends Component {
constructor(props) {
super(props);
this.state = {
activeTab: "Home",
}
}

selectTab = (name) => {
this.setState({ activeTab: name });
}
getActiveTab = () => {
return TABS.find(t => t.label === this.state.activeTab);
}

render () {
const TabComponent = getActiveTab()?.component;

return (
<>
<div className="constContainer">
<h1 className="title">Tabs</h1>
<div className="tabs">
{TABS.map(tab => {
const isActive = this.state.activeTab === tab.label
return (
<p
class={'tab' + (isActive ? ' active' : '')}
onclick={() => this.selectTab(tab.label)}
key={tab.label}
>{tab.label}</p>
)
})}
</div>
</div>
{ TabComponent && <TabComponent></TabComponent> }
</>
)
}
}

边注

尽量避免混合JSX和原始React.createElement，因为它的可读性较差，除非有特定的用例，否则没有意义。

Answer 2

您可以使用creatElement API方法:

{TABS.map(tab => {
if (this.state[tab.label]["isActive"] === true) {
return React.createElement(tab.label, {});
}
// return value for fail condition
//return null;
})}