我是否已经正确使用了`ReactElement`?

huangapple go评论69阅读模式
英文:

Have I been using `ReactElement` in the correct way?

问题

我已经用以下方式构建了一个应用程序:

export const SomeComponent = (props: SomeComponentProps): React.ReactElement => {
  return (
    <>
      <div>some content</div>
    </>
  )
}

然而,现在我在Google上搜索后,似乎这不是一个"component",而是一个"element"。

我有些困惑,不确定我是否正确构建了我的应用程序。我的所有TSX/JSX文件都是这样设置的,使用"ReactElement",但网上很多结果都显示了一些称为"components"的东西,其中包含一个"render"方法。

我的应用程序中的所有组件/元素是否都应该以React.ReactElement开头,还是我完全做错了?

英文:

I’ve built an app with "components" that all begin like this:

export const SomeComponent = (props: SomeComponentProps): React.ReactElement =&gt; {
return (
      &lt;&gt;
        &lt;div&gt;some content&lt;/div&gt;
      &lt;/&gt;
    )
}

However now I’ve been Googling and it would seem as though this is not a "component" but an "element".

I’m having some difficulty telling if I’ve built my app correctly, all of my TSX/JSX files are set up like this and use "ReactElement" but an lot of results on the web show me things called "components" with a render method in them.

Should all of my components/elements in my app start with React.ReactElement or have I done this entirely wrong?

答案1

得分: 1

不需要在 React 组件中输入返回类型。只需删除 : React.ReactElement 部分,然后您可以继续。

英文:

There is no need to type the return type of React components. So just remove the : React.ReactElement part and you're good to go.

答案2

得分: -1

第一个问题

React.ReactNode 包括了react可以提供的一切。它可以是字符串,数字,布尔值,null,undefined,片段(fragment),传送门(portal),React元素(ReactElement),或ReactNode的数组。

因此,如果你查看ReactNode的类型,它会看起来类似于以下内容。

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

第二个问题

答案是React.memouseMemo,和React.memo是不同的,请注意区分。

没有人可以比文档更好地解释给你,所以请参考新文档:https://beta.reactjs.org/reference/react/memo

英文:

First Question

React.ReactNode is everything that react can offer. It can be string, number, boolean, null, undefined, fragment, portal, ReactElement, or an array of the ReactNode.

so If you look into the type of ReactNode, it will look something like below.

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

Second Question

The answer is React.memo, useMemo, and React.memo is different so please take note of it.

No one can explain you more than docs, please refer new doc: https://beta.reactjs.org/reference/react/memo

huangapple
  • 本文由 发表于 2023年2月27日 04:23:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/75574805.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定