我正在尝试创建标签页,并将JSX组件作为内容动态放置到每个标签页中。我正在使用React和Polaris创建一个新的购物应用程序。
我似乎不能想出如何做到这一点-我是非常新的Javascript/Typescript,甚至React。
我有所有的标签工作显示正确的细节在每个,但我不能拉子JSX 'DesignForm',使它显示为在第一个标签。
import React, { Children } from "react";
import { Card, Page, Layout, TextContainer, Image, Stack, Link, Heading, Tabs} from "@shopify/polaris";
import {ReactNode, useState, useCallback} from 'react';
import { DesignForm } from "../designform/DesignForm";
export function NavTabs() {
const [selected, setSelected] = useState(0);
interface childrenProps {
children: JSX.Element;
}
const index = ({ children }: childrenProps) => {
return (
<>
<DesignForm />
{children}
</>
);
};
const handleTabChange = useCallback(
(selectedTabIndex) => setSelected(selectedTabIndex),
[],
);
const tabs = [
{
id: 'all-customers-4',
content: 'All',
accessibilityLabel: 'All customers',
panelID: 'all-customers-content-4',
children: DesignForm,
},
{
id: 'accepts-marketing-4',
content: 'Accepts marketing',
panelID: 'accepts-marketing-content-4',
},
{
id: 'repeat-customers-4',
content: 'Repeat customers',
panelID: 'repeat-customers-content-4',
},
{
id: 'prospects-4',
content: 'Prospects',
panelID: 'prospects-content-4',
},
];
return (
<Card>
<Tabs
tabs={tabs}
selected={selected}
onSelect={handleTabChange}
disclosureText="More views"
>
<Card.Section title={tabs[selected].content}>
<p>Tab {selected} selected</p>
</Card.Section>
<Card.Section children={tabs[selected].children}></Card.Section>
</Tabs>
</Card>
);
}
2条答案
按热度按时间2lpgd9681#
几个指针
出于性能原因,将其移到组件之外,React组件应该以大写字母interface childrenProps { children:JSX.元素;}
如果这是静态的,请将其移到组件外部,因为它将在每次渲染中重新创建
创建一个组件Map,或者类似的东西
希望这能在某种程度上帮助你找到一个好的解决方案
干杯
juud5qan2#
在
您的子项(即DesignForm)是一个函数,此时您应该将子项设置为组件
您也可以取代
由