如何在 FluentUI DetailsList onRender function 中使用 React refs

Question

我需要在 FluentUI DetailsList 列的onRender function 中使用 ref。 但是如果我嘗試使用字符串 ref: eg: 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:.... 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:.... 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 function 不是功能組件。 如何在 FluentUI DetailsList onRender function 中使用 refs（多個）？

Answer 1

有幾種方法可以覆蓋 DetailsList 中行/列的呈現。

要為列定義新內容，最簡單的方法是在列定義中定義onRender值。 例如，在這個片段中column3有一個 function ，每次它在該列中呈現單元格時都會調用它。

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 的完整工作示例）