Question

我是TypeScript的新手，但未能使错误消失。尝试了很多事情并将any分配到我可以的任何地方，但仍然出现以下错误：

(9,7): Type '(props: IRendererProps & { children?: ReactNode; }) => any[]' is not assignable to type 'StatelessComponent<IRendererProps>'.
  Type 'any[]' is not assignable to type 'ReactElement<any> | null'.
    Type 'any[]' is not assignable to type 'ReactElement<any>'.
      Property 'type' is missing in type 'any[]'

这就是我渲染组件的方式。

<Renderer
  renderStart={0}
  renderEnd={2}
  renderWrapper={(child: any) => <h1>{child}</h1>}
>
  <p>one</p>
  <p>two</p>
  <p>three</p>
</Renderer>

这是组件的外观：

import * as React from "react";

interface IRendererProps {
  readonly renderStart: number;
  readonly renderEnd: number;
  readonly renderWrapper: (x: any) => any;
}

const Renderer: React.SFC<IRendererProps> = props => {
  const { children, renderStart, renderEnd, renderWrapper } = props;
  return React.Children.map(children, (child, index) => {
    if (index < renderStart || index > renderEnd) {
      return null;
    } else {
      return renderWrapper(child);
    }
  });
};

export default Renderer;

有人知道如何解决这些错误吗？

编辑：好的，我将React.Children.map包裹成碎片，并对其进行了修复。

return <React.Fragment> {...array.map here...}</React.Fragment>

Answer 1

基本上，在React中，一个组件，无论是SFC还是类组件，都只能返回一个root节点。 React.StatelessComponent的定义为您提供了一些提示。

interface StatelessComponent<P> {
   (props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null
}

因此，哪个组件将React.Children.map包装在单个React.Element中将解决问题，它可以是div，Fragment或您喜欢的任何对象。 / p>

以下是解决问题的示例：

const Renderer: React.SFC<IRendererProps> = props => {
  const { children, renderStart, renderEnd, renderWrapper } = props;

  return (
    <div>
      {React.Children.map(children, (child, index) => {
        if (index < renderStart || index > renderEnd) {
          return null;
        } else {
          return renderWrapper(child);
        }
      })}
    </div>
  );
};

Answer 2

您不能一次直接返回多个元素。只需将它们包装到React.Fragment中即可：

const Renderer: React.SFC<IRendererProps> = props => {
    const { children, renderStart, renderEnd, renderWrapper } = props;
    return <React.Fragment>
        {
            React.Children.map(children, (child, index) => {
                if (index < renderStart || index > renderEnd) {
                    return null;
                } else {
                    return renderWrapper(child);
                }
            })
        }
        </React.Fragment>;
};

TypeScript React.SFC有无法分配的类型吗？

2 个答案: