关于react.js:React报错之Type-JSXElement-is-not-assignable

25次阅读

共计 1507 个字符,预计需要花费 4 分钟才能阅读完成。

注释从这开始~

总览

当咱们尝试从函数组件中返回元素组成的数组时,会产生 ”Type ‘() => JSX.Element[]’ is not assignable to type FunctionComponent” 谬误。为了解决该谬误,能够将元素数组包裹在 React 片段中。

这里有个示例用来展现谬误是如何产生的。

// App.tsx
import React from 'react';

// ⛔️ Type '() => JSX.Element[]' is not assignable to type 'FunctionComponent<{}>'.
// Type 'Element[]' is missing the following properties
// from type 'ReactElement<any, any>': type, props, key ts(2322)

const App: React.FunctionComponent = () => {return ['Alice', 'Bob'].map(element => <div key={element}>{element}</div>);
};

export default App;

这是齐全无效的 React.js 代码,因为咱们可能从 React 的函数组件中返回一个数组。然而,FunctionComponent接口的返回类型是 ReactElementnull

这也就意味着,咱们能够只返回一个 React 元素或者 null 值。

React 片段

为了解决该类型谬误,咱们必须将数组包裹在 React 片段(React fragment)中。

// App.tsx
import React from 'react';

const App: React.FunctionComponent = () => {
  return (
    <>
      {['Alice', 'Bob'].map(element => (<div key={element}>{element}</div>
      ))}
    </>
  );
};

export default App;

当咱们须要对一个元素列表进行分组而不向 DOM 增加额定的节点时,就会用到片段。

React.Fragment

你可能还会看到应用了更加具体的片段语法。

// App.tsx
import React from 'react';

const App: React.FunctionComponent = () => {
  return (
    <React.Fragment>
      {['Alice', 'Bob'].map(element => (<div key={element}>{element}</div>
      ))}
    </React.Fragment>
  );
};

export default App;

下面的两个例子达到了雷同的后果 – 它们对元素列表的元素进行分组,而没有给 DOM 增加额定的节点。

div

另一个解决方案是将元素数组包裹在另一个 DOM 元素中,例如一个 div。

// App.tsx
import React from 'react';

const App: React.FunctionComponent = () => {
  return (
    <div>
      {['Alice', 'Bob'].map(element => (<div key={element}>{element}</div>
      ))}
    </div>
  );
};

export default App;

这依然合乎 FunctionComponent 接口中指定的返回类型,因为咱们的组件返回的是一个繁多的 React 元素。

总结

为了解决 ”Type ‘() => JSX.Element[]’ is not assignable to type FunctionComponent” 谬误,能够应用 React 片段或者 div 将元素数组进行包裹。

正文完
 0