Javascript 如何在加载此React组件时触发此功能，而不需要单击按钮？

这几天来，我一直在努力让它发挥作用，但我没有想到解决办法。这是我的第一个ReactJS项目，因为我对C更熟悉

基本上，我正在尝试创建一个打印标签组件，当在调用该组件的菜单上单击链接时，该组件将触发打印对话框并打印该打印标签组件。我可以通过在抽屉中加载组件并将触发器映射到按钮上的点击事件来实现这一点，但我不希望用户必须再点击一次

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

class ComponentToPrint extends React.Component {
  render() {
    return (
      <Col>
         <Row>Customer Name</Row>
         <Row>Address</Row>
         <Row>City, State, Zip</Row>
      </Col>

    );
  }
}

const PrintLabel = () => {
  const componentRef = useRef();
  return (
    <div>
      <ReactToPrint
        trigger={() => <button>Print</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};

import React，{useRef}来自“React”；
从“react to print”导入react to print；
类ComponentToPrint扩展了React.Component{
render（）{
返回(
客户名称
地址
城市、州、邮编
);
}
}
常量PrintLabel=（）=>{
const componentRef=useRef（）；
返回(
打印}
content={（）=>componentRef.current}
/>
);
};

---

导出默认打印标签

看起来react to print不直接支持此行为。一种解决方案可能是在组件渲染时单击按钮（按id查找）。这可以使用

useffect

hook（）完成

import React，{useRef，useffect}来自“React”；
...
常量PrintLabel=（）=>{
const componentRef=useRef（）；
useffect（（）=>{
document.getElementById（'print-button'）。单击（）；
});
返回(
打印}
content={（）=>componentRef.current}
/>
);
};

看起来react to print不直接支持此行为。一种解决方案可能是在组件渲染时单击按钮（按id查找）。这可以使用

useffect

hook（）完成

import React，{useRef，useffect}来自“React”；
...
常量PrintLabel=（）=>{
const componentRef=useRef（）；
useffect（（）=>{
document.getElementById（'print-button'）。单击（）；
});
返回(
打印}
content={（）=>componentRef.current}
/>
);
};

如果使用有状态组件而不是功能组件，则可以在ComponentDidMount中完成。在函数式组件中，您可能可以在“useEffect”函数中执行一个。如果您使用的是有状态组件而不是函数式组件，则可以在ComponentDidMount中执行。在一个函数中，您可能可以在“useffect”函数中执行一个

import React, { useRef, useEffect } from 'react';

...

const PrintLabel = () => {
  const componentRef = useRef();

  useEffect(() => {
    document.getElementById('print-button').click();
  });

  return (
    <div>
      <ReactToPrint
        trigger={() => <button id="print-button">Print</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
};