Question

我需要在FluentUI DetailsList列的onRender函数内使用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（多个）？

Answer 1

有多种方法可以覆盖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回调。从那里返回一个react组件很简单，该组件可以使用它需要的任何钩子（例如useRef）。

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

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

1 个答案: