0

我需要在onRenderFluentUI DetailsList 列的函数中使用 ref。但是如果我尝试使用字符串 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（多个）？

4

1 回答 1

0

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

要为列定义新内容，最简单的方法是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原始项目、列表中的索引和列定义调用回调。从那里返回一个反应组件是微不足道的，它可以使用它需要的任何钩子（例如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>
}

（关于 codepen 的完整工作示例）

于 2020-06-11T22:33:41.630 回答