9

我有一个 TSX 组件，它是一个像这样包装其子级的容器：

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 Property 'children' is missing in type 'IntrinsicAttributes & { label: string; 孩子：反应元素 | 字符串 | 号码 | {} | （反应……

// 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 组件能够像完整类组件一样带孩子的正确方法是什么？这可能吗？我不认为它不应该，它仍然是一个无状态组件，children只是一种特殊的props，真正的问题似乎是这里的工具（Visual Studio）没有将 TSX 内容节点映射到children道具。

4

2 回答 2

13

使纯 TypeScript React 组件能够像完整类组件一样带孩子的正确方法是什么

样本 ：

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请注意， get 作为andchildren的一部分传递。allPropsprops

于 2016-06-15T00:32:22.023 回答
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>
  }
}
于 2018-03-09T21:11:02.477 回答