哪种语法对于这个泛型 TypeScript React 是正确的?

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

Which syntax is correct for this generic TypeScript React

问题

我的组件应该对列表进行映射,其中所有元素都是相同类型。在props中,我传递列表和返回JSX元素的函数。

  1. interface ListProps<T> {
  2. items: T[];
  3. renderItem: (item: T) => ReactNode;
  4. }
  5. const List = <T>(props: ListProps<T>) => {
  6. return (
  7. <div>
  8. {props.items.map(props.renderItem)}
  9. </div>
  10. );
  11. };

我对这个泛型<T>的函数式组件感到困惑,如何正确地编写它?

英文:

My component should map through a list where all elements are same type. In props I give list and function which returns JSX element

  1. interface ListProps&lt;T&gt;{
  2. items: T[];
  3. renderItem: (item: T) =&gt; ReactNode;
  4. }
  5. const List = &lt;T&gt;(props: ListProps&lt;T&gt;) =&gt; {
  6. return (
  7. &lt;div&gt;
  8. {props.items.map(props.renderItem)}
  9. &lt;/div&gt;
  10. );
  11. };

I stacked with this functional component, how to write this generic &lt;T&gt; properly?

答案1

得分: 1

你应该按照以下方式创建你的类型:

  1. interface ListProps<T> {
  2. items: T[];
  3. renderItem: (item: T) => ReactNode;
  4. }
  5. const List: <T>(props: ListProps<T>) => ReactNode = props => {
  6. return <div>{props.items.map(props.renderItem)}</div>;
  7. };

或者,如果你选择使用函数:

  1. interface ListProps<T> {
  2. items: T[];
  3. renderItem: (item: T) => ReactNode;
  4. }
  5. function List<T>(props: ListProps<T>) {
  6. return <div>{props.items.map(props.renderItem)}</div>;
  7. };
英文:

You should create your type as follows

  1. interface ListProps&lt;T&gt; {
  2. items: T[];
  3. renderItem: (item: T) =&gt; ReactNode;
  4. }
  5. const List: &lt;T&gt;(props: ListProps&lt;T&gt;) =&gt; ReactNode = props =&gt; {
  6. return &lt;div&gt;{props.items.map(props.renderItem)}&lt;/div&gt;;
  7. };

Or if you choose to use function

  1. interface ListProps&lt;T&gt; {
  2. items: T[];
  3. renderItem: (item: T) =&gt; ReactNode;
  4. }
  5. function List&lt;T&gt;(props: ListProps&lt;T&gt;) {
  6. return &lt;div&gt;{props.items.map(props.renderItem)}&lt;/div&gt;;
  7. };

答案2

得分: 0

以下应该可以工作,注意带有逗号的&lt;T,&gt;。您可以参考这个很棒的答案获取更多信息。

  1. import * as React from 'react';
  2. interface ListProps<T> {
  3. items: T[];
  4. renderItem: (item: T) => React.ReactNode;
  5. }
  6. const List = <T>(props: ListProps<T>) => {
  7. return (
  8. <div>
  9. {props.items.map(props.renderItem)}
  10. </div>
  11. );
  12. };
英文:

The following should work, note the &lt;T,&gt; with a comma. You can refer to this great answer for more information.

  1. import * as React from &#39;react&#39;;
  2. interface ListProps&lt;T&gt; {
  3. items: T[];
  4. renderItem: (item: T) =&gt; React.ReactNode;
  5. }
  6. const List = &lt;T,&gt;(props: ListProps&lt;T&gt;) =&gt; {
  7. return (
  8. &lt;div&gt;
  9. {props.items.map(props.renderItem)}
  10. &lt;/div&gt;
  11. );
  12. };

huangapple
  • 本文由 发表于 2023年7月6日 20:08:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/76628667.html
匿名

发表评论

匿名网友

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

确定