TSX/JSX 项目中的可选 JSX 道具

Posted 2023-02-21

【中文标题】TSX/JSX 项目中的可选 JSX 道具

【英文标题】：Optional JSX Props In a TSX/JSX Project

【发布时间】：2018-01-07 07:37:00

【问题描述】：

我有一个要从 JS 转换为 TS 的 React 项目。我遇到的一个问题是 TSX React 假设功能组件中定义的所有属性都是必需的道具。

// ComponentA.tsx
class ComponentA extends React.Component<any, any> 
  render() 
    /* Type ' equalWidth: true; children: Element[]; ' is not assignable to type ' children: any; className: any; equalWidth: any; '.
     * Property 'className' is missing in type ' equalWidth: true; children: Element[]; '.' */
    return <ComponentB equalWidth />
  

和

// ComponentB.js
const ComponentB = ( children, className, equalWidth ) => 
  return (...)

有没有办法向 TS 表明 JSX 组件 props 都是可选的？

【问题讨论】：

相关 - Optional property on a component

【参考方案1】：

假设 ComponentB.js 最终会成为一个 TypeScript 组件：

interface ComponentBProps 
    children?: ReactNode;
    className?: string;
    equalWidth?: boolean;


const ComponentB = ( children, className, equalWidth : ComponentBProps) => 
    // 
;

在所有属性都是可选的特殊情况下，您可以从界面上的每个属性中删除? 并使用Partial<ComponentBProps>，但我想至少有些东西最终会成为必需的属性。

---

如果您想保持 ComponentB.js 原样，那么另一种解决方案是创建一个类型定义文件：

import  ReactNode, StatelessComponent  from "react";

interface ComponentBProps 
    children?: ReactNode
    className?: string;
    equalWidth?: boolean;


export const ComponentB: StatelessComponent<ComponentBProps>;

如果你把这个与 javascript 文件放在同一个目录中并且名称是 ComponentB.d.ts，那么你应该能够在你的 TypeScript 文件中导入 ComponentB。

我编写定义的方式假定组件是一个命名导出，而不是默认的，即它像.js 文件中的export const ComponentB 一样导出。

（可能）工作示例：https://github.com/fenech/tsx-jsx

【讨论】：

好吧，是与否：是的，ComponentB 最终将被转换为 TypeScript，但目前还没有。我不能注释 .js 文件，所以我不能添加 TS 类型 - 如果有可能，那么我可以正确地注释它。

@Tyler 我做了一个小例子，它使用了.d.ts 文件并添加了一个链接

【参考方案2】：

一个最简单的选项是为您的可选道具设置一个默认值。例如，如果className 是可选的，您可以将ComponentB.js 更改为类似的内容。

const ComponentB = ( children, className="", equalWidth ) => 
  return (...)

另外，如果你在函数体而不是签名中解构你的道具，TS 不会抱怨打字。

const ComponentB = (props) => 
  const  children, className, equalWidth  = props;
  return (...)

【讨论】：

很好的解决方案！问题是 TS 假设如果你有 onClick = null，onClick 的类型是文字 null - 而不是 null 作为默认值

我要把赏金给你。尽管该解决方案不是完全我正在寻找的 - 存在一些问题（正如我在上面的评论中所描述的） - 它相当容易和直接解决。谢谢！

@TylerSebastian 如果它对你有所帮助，我很高兴