使用 Slicklist 时模块构建失败

Question

我不想返回一个包含行和所有内容的表格主体，而是返回一个 Slicklist（我需要在表格行中添加 Drag&Drop）。

return (
      <ComponentLayout>
       <TableHeader />
        <table>
          <tbody>
            <SlickList
              lockAxis="y"
              v-model={Object.values(this.products)}
              value={Object.values(this.products)}
              onInput={ (products: any) => this.handleSort(products)}
            >
              {Object.values(this.products).map(
                (product: any, prodIndex: number) => {
                  // @ts-ignore
                  <SlickItem index={prodIndex}
                      {
                        <tr>
                          <td>{product.name}</td>  
                        </tr>
                      }
                  </SlickItem>;
                }
              )}
            </SlickList>
          </tbody>
        </table>
      </ComponentLayout>
    );

但我收到以下错误：

编译有问题

/ComponentLayout.tsx 中的错误

模块构建失败（来自./node_modules/babel-loader/lib/index.js）：TypeError：/ComponentLayout.tsx：AssignmentExpression 的属性左侧预期节点的类型为 [“LVal”] 但得到“CallExpression”

你知道为什么会这样吗？