如何在组件界面中强制使用特定类型的 HTML 标签答案

【问题标题】：How to force specific type of HTML tag in the component interface如何在组件界面中强制使用特定类型的 HTML 标签
【发布时间】：2021-11-25 20:44:31
【问题描述】：

我创建了一个输入 (type="checkbox") 组件，它接受来自父级的子道具

interface CustomCheckboxProps {
  children?: string;
}

const CustomCheckbox = (props: CustomCheckboxProps) => {
  const { children } = props;

  return (
    <div className="flex">
      <input type="checkbox" />
      <label>{children}</label>
    </div>
  );
};

我想更改孩子的颜色，但仅限于某些部分（子字符串）。例如一个字符串Lorem ipsum dolor sit amet, consectetur adipiscing elit，我希望Lorem ipsum dolor sit amet是红色的。

我通过将子类型更改为 ReactNode 并在内部传递带有 <span> 的 <p> 并使用 css 更改跨度文本的颜色来找到解决方案

const Parent = () => {
  return (
    <CustomCheckbox>
      <p>
        <span className="text-red-300">Lorem ipsum dolor sit amet</span>,
        consectetur adipiscing elit
      </p>
    </CustomCheckbox>
  );
};

这按预期工作，但 ReactNode 允许所有类型的 HTMLElement，例如 <button> 和 <h1>。有没有办法强制子类型仅为 [<p> with <span> inside] 或 [<p> and <span>]？我不想要标签内的按钮或列表

我尝试了HTMLParagraphElement 类型，但它给出了错误：Type 'Element' is missing the following properties from type 'HTMLParagraphElement': align, addEventListener, removeEventListener, accessKey, and 274 more.ts(2740)

我还尝试了以下方法：

interface Props {
  children?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>;
}

它确实接受<p>，但问题是它接受所有类型的 HTMLElement。

有没有办法强制 HTMLElement 的类型？如果不可能，是否有其他方法可以更改字符串类型的文本（子字符串）的颜色？谢谢

注意：我在此示例中使用了 Tailwind CSS：

className="flex" -> style={{ display: flex }}
className="text-red-300" -> style={{ color: red }} //一些红色值

【问题讨论】：

你在做什么，<div> 是唯一有效的选项？因为 div 几乎总是不是正确的标签。
为什么不将每个孩子都包装在一个 div 中，如果这真的是你想要的？您可以使用React.cloneElement 来完成此操作
@Mike'Pomax'Kamermans，我想阻止<button>、<input>等标签。
不过，这不是答案。你实际上想要做什么需要你编写一个只允许 div 子级的接口，因为这几乎肯定不是它应该包含的内容。（div 列表是一个很好的迹象，表明您没有生成语义标记，而是生成 DOM 污染）
@Mike'Pomax'Kamermans，不一定只有div标签，我只是想知道我是否可以强制孩子成为特定类型的HTML标签。

标签： reactjs typescript types

【解决方案1】：

您可以使用静态类型检查器，例如 Flow。使用 Flow，您可以进行比标准 prop-types 库更多的类型检查，而且它也是由 Facebook 开发的！

Flow 有一个称为 React.Element 的特殊类型，它强制将特定类型的 JSX 元素（如 div、span、h1 等）（固有 JSX 元素）添加到组件中。这是一个如何使用它的示例：

import * as React from 'react';

type Props = {
children: React.Element<'div'> //children is required
};

function MyComponent(props: Props){
// do some stuff
}

有关更多示例，请访问他们的官方 documentation 并在您的 React 代码库中添加依赖项，请使用 this guide。

【讨论】：

似乎 dev 正在从 flow 迁移到 Typescript，并且不建议使用 flow 启动新项目。另外，我需要在我的项目中使用 TypeScript。谢谢