調用函數 forwardRef 組件 React

Question

我正在構建一個組件，它調用一個通過道具傳遞的組件。 該組件在其中使用前向引用，因此我無法調用它。 它顯示itemComponent 。

代碼：

父組件：

export default function DNDList({
  items,
  idKey = 'id',
  itemComponent,
  listStyles,
  hideParentList
}) {
  const [state, dispatch] = useReducer(dndReducer, items);
  const previewRef = useRef(null);

  const onMove = (dragIndex, hoverIndex) => {
    dispatch({
      type: 'switch',
      data: {
        to: hoverIndex,
        from: dragIndex
      }
    });
  };

  console.log(itemComponent);

  const renderItems = () => (
    <>
      {state.map((item, i) => (
        <Item previewRef={previewRef} id={item[idKey]} key={item[idKey]} index={i} onMove={onMove}>
          {/* Main Code, Item Component is a forward Ref, see example below */}
          {itemComponent ? itemComponent({ item, ref:previewRef }) : item[idKey]}
        </Item>
      ))}
    </>
  );

  return hideParentList ? (
    renderItems()
  ) : (
    <ul className={listStyles}>{renderItems()}</ul>
  );
}

itemComponent示例：

const TemplateListBlock = forwardRef(({ item }, ref) => {
  const onRemoveSender = () => {};

  console.log(ref);

  return (
    <li className={`${styles.contentBlock}`} data-template="true">
      <div className="drag-handler no-select" ref={ref}>
        <Menu />
      </div>
      <div className={styles.templateSettings}>
        <TemplateSenderOptions message={item} onRemoveSender={onRemoveSender} />
      </div>
      <p className={commonStyles.senderWrapper}>
        <span className={commonStyles.sender}>{item.from}</span> will appear
        here.
      </p>
    </li>
  );
});

第一個組件中使用的組件：

function Item({ id, index, onMove, children }) {
  const ref = useRef(null);


  drag(drop(ref));

  return (
    <li style={{ opacity }} key={id} ref={ref} data-handler-id={handlerId}>
      {children}
    </li>
  );
}

Answer 1

而不是像這樣傳遞previewRef ： <Item previewRef={previewRef}...嘗試像這樣傳遞它： <Item ref={previewRef}...