FluentUI中的IRenderFunction接口定义是什么意思？

Question

我是 typescript 的新手，已经开始使用 Fluent DetailsList UI。 https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist.

我正在调查类型为 IRenderFunction 的道具 onRenderRow。

https://github.com/microsoft/fluentui/blob/master/packages/utilities/src/IRenderFunction.ts

在这里，我了解到 props 是泛型类型 P 而 defaultRender 是一个以 props 为参数且 returns JSX.Element or null 类型。但是这两个括号是什么意思？是函数类型吗？这个接口的实现应该是什么样的？

(props?: P, defaultRender?: (props?: P) => JSX.Element | null)

这个整体也是返回JSX.Element or null类型。

Answer 1

这是一个函数，有两个参数 props 和defaultRender。

But what does parentheses around both of these mean? Is it a function type?

是的！ Return 该函数的值是 JSX.Element or null.

第一个参数 props 是泛型类型 P，第二个 defaultRender 是带有一个参数 props 的函数通用类型 P 其中 returns JSX.Element | null.

这是一个如何更改行背景颜色的示例：

<DetailsList
  ...
  onRenderRow={(props, defaultRender) => {
    // props and defaultRender could be undefined
    if (props && defaultRender) {
      return defaultRender({
        ...props,
        styles: {
          ...props.styles,
          root: {
            backgroundColor: '#f00',
          }
        }
      })
    }
    return null;
  }}
/>

Codepen 工作示例。

FluentUI中的IRenderFunction接口定义是什么意思？

What does IRenderFunction interface definition mean in FluentUI?

typescript

typescript-generics

fluent-ui

fluentui-react