ReactJS TypeScript 纯组件 children

Question

我有一个 TSX 组件，它是一个包装其 children 的容器，如下所示：

import * as React from "react";

interface IProps extends React.Props<Box> {
}

interface IState {
}

export class Box extends React.Component<IProps, IState> {
    render() {
        return (
            <div>
                <h3>Check this out:</h3>
                {this.props.children}
            </div>);
    }
}

我也有一些纯成分，比如这个：

// ReSharper disable once InconsistentNaming - React components must start with a capital letter.
export function LabelTest(props: { label: string }) {
    return (
        <div style={{ display: "flex" }}>
            <label style={{ flex: "1 0 0" }}>{props.label}</label>
            <div style={{ width: "auto" }}>
                This is a pure component.
            </div>
        </div>);
}

虽然我一辈子都想不出如何制作纯容器组件。声明看起来没问题，没有显示错误：

// ReSharper disable once InconsistentNaming - React components must start with a capital letter.
export function LabelBox(props: { label: string, children: React.ReactNode }) {
  return (
    <div style={{ display: "flex" }}>
      <label style={{ flex: "1 0 0" }}>{props.label}</label>
      <div style={{ width: "auto" }}>
        {props.children}
      </div>
    </div>);
}

children 是 React.ReactNode 因为它在 React.Props<X>.

中就是这样

使用时我得到 TS2324 属性 'children' is missing in type 'IntrinsicAttributes & { label: string; children：反应元素 |字符串 |编号 | {} | (反应....

// ReSharper disable once InconsistentNaming - React components must start with a capital letter.
export function LabelNumberInput(props: { label: string, value: number }) {
  return (
    <LabelBox label={props.label}>
      <input type="number" value={props.value} />
    </LabelBox>);
}

我不能说下面的代码片段，因为它会说 在外部模块 _.tsx 中找不到符号 'LabelBox'（它是文件所有这些代码都在其中）。先放功能还是先接口都无所谓，反正总感觉不对

interface ILabelBoxProps extends React.Props<LabelBox> { label: string }
export function LabelBox(props: ILabelBoxProps) {
  return (
    <div style={{ display: "flex" }}>
      <label style={{ flex: "1 0 0" }}>{props.label}</label>
      <div style={{ width: "auto" }}>
        {props.children}
      </div>
    </div>);
}

使纯 TypeScript React 组件能够像完整的 class 组件一样采用 children 的正确方法是什么？这可能吗？我认为不应该，它仍然是一个无状态组件并且 children 只是一种特殊的 props，真正的问题似乎是这里的工具 (Visual Studio)它没有将 TSX 内容节点映射到 children prop.

Answer 1

What's the right way to make a pure TypeScript React component capable of taking children just like a full class component would

样本：

interface PrimitiveProps extends React.HTMLProps<HTMLDivElement>{
   myAdditionalProp:any;
};

export const Content = (allProps: PrimitiveProps) => {
    const {myAdditionalProp, ...props} = allProps;
    return (
        <div data-comment="Content" {...props}/>;
    );
};

当然，您可以随意使用 myAdditionalProp 做任何事情，如果您愿意，可以在 PrimitiveProps 中添加更多道具。请确保在通过之前将它们从 allProps 中删除。请注意，children 作为 allProps 的一部分被传递，因此 props.

Answer 2

完整示例如下：

interface PaginationItemProps extends React.HTMLProps<HTMLDivElement> {
}

const PaginationItem = (props: PaginationItemProps) => {
   return <div>{props.children}</div>;
}

class Pagination extends React.Component<PaginationProps> {
  render() {
    return <div>          
        <PaginationItem>CHILDREN RENDER</PaginationItem>
    </div>
  }
}

ReactJS TypeScript 纯组件 children

ReactJS TypeScript pure component with children

typescript

reactjs

visual-studio-2015

tsx

typescript-typings