Question

我已经定义了一个组件：

interface Role {
  name: string;
  description: string;
}

interface BPRolesProps extends React.Props<null> {
  roles: Role[];
}

const BPRoles = ({ roles }: BPRolesProps) => {
  if (!roles.length) {
    return null;
  }
  return (
    <div>
      {roles.map(r => <div key={r.name}><span title={r.description}>{r.name}</span></div>)}
    </div>
  );
};

然后我尝试使用render渲染它：

render(<BPRoles />, null);

问题是我收到了这个错误：

error TS2605: JSX element type 'Element | null' is not a constructor function for JSX elements.
  Type 'null' is not assignable to type 'ElementClass'.

Answer 1

此问题与here有关。

目前，这个技巧可以用作解决方法：

const BPRoles = ({ roles }: BPRolesProps) => {
  if (!roles.length) {
    return null!; // <= never is assignable to anything, so the return type will be Element
  }
  return (
    <div>
      {roles.map(r => <div key={r.name}><span title={r.description}>{r.name}</span></div>)}
    </div>
  );
};

Answer 2

无状态纯函数组件无法以这种方式呈现，而是需要使用标准React.createClass或使用es6版本构建的容器组件，它将呈现无状态组件并且用于ReactDOM.render方法。见https://github.com/facebook/react/issues/5455

同样ReactDOM.render期望dom元素作为第二个参数。 render(<BPRoles />, null);你需要一个有效的html元素作为第二个参数，你传递的是null，React知道它不是一个DOM元素。

无法实例化可能返回null的StatelessFunctionalComponent

2 个答案: