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>);
}

childrenReact.ReactNodeそれが入っているからですReact.Props<X>。

使用すると、TS2324 Property 'children' is missing in type 'IntrinsicAttributes & { label: string; ' が表示されます。子: ReactElement | 文字列 | 数 | {} | (リアック... .

// 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特別な種類の.propschildren

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 に答える