UseRef 到 select 实际的父组件

Question

我正在使用 useRef select 组件并打印它。

组件如下：

import React, { useRef } from 'react';
import { useReactToPrint } from 'react-to-print';

const Details = ({ view }) => {
  const componentRef = useRef();
  const handlePrint = useReactToPrint({
    content: () => componentRef.current
  });

  return (
    <div className="order-details-section" ref={componentRef}>
      <div className="return-an-issue-header">
        <div className="return-an-issue-title"></div>
        {view && (
          <div className="print-items-container">
            <p onClick={handlePrint}>click to print</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default Details;

它工作正常，但仅适用于作为整个页面的一部分的当前组件。我想打印父组件，或者通过 className.

传递它

有没有可能做这样的事情？要在 useRef 中获取父组件或通过 class?

select 它

Answer 1

您可以像通常将 props 传递给子组件一样将 ref 传递给子组件。

注意：ref不会触发重新渲染，所以当输入值改变时，需要点击按钮获取新值。

这只是演示将 ref 传递给子组件的代码示例。

Codesandbox

import { useRef, useState } from "react";
export default function App() {
  const inputRef = useRef();
  return (
    <div className="App">
      <input ref={inputRef} />
      <ChildComponent parentRef={inputRef} />
    </div>
  );
}

const ChildComponent = ({ parentRef }) => {
  console.log("parentRef", parentRef);

  const [value, setValue] = useState("");
  const getValue = () => {
    setValue(parentRef.current.value);
  };
  return (
    <>
      <h1>Child Component</h1>
      {value}
      <button onClick={getValue}>Get Value</button>
    </>
  );
};

Answer 2

如果你想访问父组件的 ref 并打印它，你可以将 useReactToPrint 移动到父组件并将 handlePrint 函数作为 props 传递给子组件

const Details = ({ view, handlePrint}) => {

  return (
    <div className="order-details-section">
      <div className="return-an-issue-header">
        <div className="return-an-issue-title"></div>
        {view && (
          <div className="print-items-container">
            <p onClick={handlePrint}>click to print</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default Details;

const Parent = () => {

  const componentRef = useRef();
  const handlePrint = useReactToPrint({
      content: () => componentRef.current
  });
  return (
      <div ref ={componentRef}> 
         <div>Some other content</div>
         <Details view={...} handlePrint={handlePrint}/>
     </div>
  )
}

UseRef 到 select 实际的父组件

UseRef to select the parent component of the actual one

javascript

ref

reactjs

react-hooks

use-ref