typescript 将JSX元素添加为属性

watbbzwu 于 2022-11-30 发布在 TypeScript

关注(0)|答案(2)|浏览(144)

我正在尝试创建标签页，并将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>
  );
}

typescript

来源：https://stackoverflow.com/questions/74614494/adding-jsx-element-as-a-property

2条答案

按热度按时间

2lpgd9681#

几个指针
出于性能原因，将其移到组件之外，React组件应该以大写字母interface childrenProps { children：JSX.元素;}

//  change from index to Index
  const Index = ({ children }: childrenProps) => {
    return (
        <>
            <DesignForm />
            {children}
        </>
    );
  };

如果这是静态的，请将其移到组件外部，因为它将在每次渲染中重新创建

const tabs = [
    {
      id: 'all-customers-4',
      content: 'All',
      accessibilityLabel: 'All customers',
      panelID: 'all-customers-content-4',
    },
    {
      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',
    },
  ];

创建一个组件Map，或者类似的东西

const componentMap = {
  ['all-customers-4']: DesignForm,
  // ... more components can be added in the future
}

const EmptyComponent = () => null;

export function NavTabs() {

  const [selected, setSelected] = useState(0);
  
  const handleTabChange = useCallback(
    (selectedTabIndex) => setSelected(selectedTabIndex),
    [],
  );

  const ChildComponent = useMemo(() => {

     return componentMap[selected] ?? EmptyComponent

  }, [selected])
 

  return (
    <Card>
      <Tabs
        tabs={tabs}
        selected={selected}
        onSelect={handleTabChange}
        disclosureText="More views"
      >
        <Card.Section title={tabs[selected].content}>
          <p>Tab {selected} selected</p>
          <ChildComponent />
        </Card.Section>
        <Card.Section children={tabs[selected].children}></Card.Section>
      </Tabs>
    </Card>
  );
}

希望这能在某种程度上帮助你找到一个好的解决方案
干杯

赞(0）回复(0）举报 2022-11-30

juud5qan2#

在

{
      id: 'all-customers-4',
      content: 'All',
      accessibilityLabel: 'All customers',
      panelID: 'all-customers-content-4',
      children: DesignForm,
    }

您的子项（即DesignForm）是一个函数，此时您应该将子项设置为组件

{
      id: 'all-customers-4',
      content: 'All',
      accessibilityLabel: 'All customers',
      panelID: 'all-customers-content-4',
      children: <DesignForm/>,
    }

您也可以取代

<Card.Section children={tabs[selected].children}></Card.Section>

由

<Card.Section>
{tabs[selected].children}
</Card.Section>

赞(0）回复(0）举报 2022-11-30

我来回答

typescript 将JSX元素添加为属性

2条答案

相关问题

热门标签

最新问答