将 HTML 输入控件添加到 React-Table 中的标题

问题描述

我正在使用 React 和 React-Table 版本 7。它对我来说运行良好，但我想在我的顶级标题中添加一个复选框。所以我是这样试的：

const columns = React.useMemo(
    () => [

        {
            Header: 'Monster Types <input type="checkBox" id="horns" name="horns">',columns: [
                {
                    Header: 'Possible Dungeons',accessor: 'dungeonNames',Cell: ({ row }) => <div>{row.original.dungeonNames.join(',')}</div>,Filter: TraineeSelectColumnFilter,sortType: "basic",filter: 'includes'
                },{
                    Header: 'Monsters',accessor: 'monsterNames',...

但是当我这样做时，它只是打印出 HTML 而不是实际的复选框。

所以它看起来像这样：

Monster Types<input type="checkBox" id="horns" name="horns">

有谁知道在 React-Table 标题旁边添加 HTML 输入的方法吗？

谢谢！

解决方法

对于可能会发现此问题的任何人，我都知道如何去做。您将 HTML 放在 Header 部分，然后添加一个 id，如下所示：

  Header: () => (<div>Monster Types <input type="checkbox" id="horns" name="horns"></div>),id: 'monsterTypesDiv',