reactjs - TSX/JSX项目中的可选JSX Prop

我有一个正在从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组件道具都是可选的？

最佳答案

假设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，那么你应该能够在你的Type脚本文件中导入ComponentB。
我编写定义的方式假设组件是命名导出，而不是默认导出，即它像export const ComponentB文件中的.js那样导出。
（可能）工作示例：https://github.com/fenech/tsx-jsx

关于reactjs - TSX/JSX项目中的可选JSX Prop ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45420826/