Question

我有一个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属性'intrinsicAttributes＆amp; {label：string; children：ReactElement |字符串|号码| {} | （REAC ...

// 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）没有' t将TSX内容节点映射到children prop。

Answer 1

制作纯粹的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中删除。请注意，children作为allProps的一部分传递，因此props。

Answer 2

以下是完整的示例：

if(x === 1){
//...
} else if(x === 2) {
//...
} else if(x === 3) {
//...
} else {} {
//...
}```

具有子项

2 个答案: