如何在 FluentUI DetailsList onRender 函数中使用 React refs

Question

我需要在 FluentUI DetailsList 列的 onRender 函数中使用 ref。但是如果我尝试使用字符串引用：例如：ref={"myref"} React 会抱怨 react-dom.development.js:13381 Uncaught (in promise) Error: Function components cannot have string refs. We recommend using useRef() instead. Learn more about using refs safely here:....。如果我尝试使用 useRef，我会收到一条错误消息，指出 onRender 函数不是功能组件。如何在 FluentUI DetailsList onRender 函数中使用 refs（多个）？

Answer 1

有几种方法可以覆盖 DetailsList 中 rows/columns 的呈现。

要为列定义新内容，最简单的方法是在列定义中定义一个 onRender 值。例如，在此代码段中，column3 每次呈现该列中的单元格时都会调用一个函数。

const _columns = [
      { key: 'column1', name: 'Name', fieldName: 'name', minWidth: 100, maxWidth: 200, isResizable: true },
      { key: 'column2', name: 'Value', fieldName: 'value', minWidth: 100, maxWidth: 200, isResizable: true },
      { key: 'column3', name: 'Custom value with ref', fieldName: 'value', minWidth: 100, maxWidth: 200, onRender: renderColumn3 },
    ];

onRender 回调是用原始项目、列表中的索引和列定义调用的。从那里到 return 反应组件是微不足道的，它可以使用它需要的任何钩子（例如 useRef）。

此示例呈现了一个使用 refs 的非常简单的组件：

const MyControlForColumn3 = props => {
  const myRef = React.useRef();

  return <div ref={myRef}><button onClick={() => console.log(myRef.current)}>Print ref.current to console</button>{props.children}</div>;
}

const renderColumn3 = (item: any, itemIndex: any, columnDefinition: any) => {
  return <MyControlForColumn3>Item #{itemIndex}</MyControlForColumn3>
}

(Full working example on codepen)

如何在 FluentUI DetailsList onRender 函数中使用 React refs

How to use React refs inside FluentUI DetailsList onRender function

office-ui-fabric

fluent-ui