你可以使用导出默认函数和 ReactToPrint 吗？答案

【问题标题】：Can you use an export default function, with ReactToPrint?你可以使用导出默认函数和 ReactToPrint 吗？
【发布时间】：2022-01-11 22:40:36
【问题描述】：

我正在尝试实现 ReactToPrint，以打印导出默认函数 ToDoList 的内容（它从另一个类返回 Todo 卡的映射）。

 export default function ToDoList({ todos, toggleTodo }) {
  return todos.map((todo) => {
    return <Todo key={todo.id} toggleTodo={toggleTodo} todo={todo} />;
  });
}

如果您使用类组件或如下所示的功能组件，ReactToPrint 库似乎更受欢迎。

export const ComponentToPrint = React.forwardRef((props, ref) => {
return (
  <div ref={ref}>
    <h2>Grocery List Contents</h2>
  </div> 
); });

我可以通过 ReactToPrint 使用 ToDoList 默认函数的最佳方式是什么？

感谢您的宝贵时间。

【问题讨论】：

标签： javascript html reactjs printing react-to-print

【解决方案1】：

我能够弄清楚。我只需要将所需的元素添加到 span 标签，并为其添加一个新的 ref 变量。这让计算机可以看到我想要的组件。

function App() {
  const [todos, setTodos] = useState([]);
  const todoNameRef = useRef();
  const todoListRef = useRef();
);

 <span ref={todoListRef} class="containerClass">
        <ToDoList todos={todos} toggleTodo={toggleTodo}/>
        </span>

【讨论】：