在对象中添加 HTML 元素

Posted 2023-02-21

【中文标题】在对象中添加 HTML 元素

【英文标题】：Adding HTML element inside a object

【发布时间】：2021-03-23 11:16:41

【问题描述】：

我正在使用这个数组状态在表格上呈现信息：

正如你们所看到的，我需要在表格的每一行上放置一个复制按钮，但我尝试将 html 直接插入到它自己的对象中，但它失败了：

如何在表格的每一行显示此复制按钮？ 提前致谢。

【问题讨论】：

您的表格组件正在将列值转换为字符串。您使用哪个库来呈现该表？

我正在使用 MaterialUI DataGrid

查看这个答案***.com/questions/64331095/…关于如何实现自定义单元格渲染器

在codesandbox 中添加示例代码进行调试非常棒。

你们能帮帮我吗？我不知道如何用@uke 的答案来做这件事，这是代码框：codesandbox.io/s/wizardly-worker-t3yzd?file=/src/App.js

【参考方案1】：

这个：

renderCell: (ValueFormatterParams) => 
  <a href="#">Oi </a>; // you are missing return statement

应该是：

renderCell: (ValueFormatterParams) => 
  return (<a href="#">Oi </a>); 

或：

 renderCell: (ValueFormatterParams) => ( <a href="#">Oi </a>)

编辑：从行获取数据：

  copyHanle = (item) => 
    console.log(item);
  
  
  //...
  render() 
   const columns = [
      //...
      renderCell: (ValueFormatterParams) => 
         const row = ValueFormatterParams;
         return (
            <CopyToClipboard
              text=row.name
              onCopy=() => this.setState( copied: true )
             >
             <button>Copy</button>
          </CopyToClipboard>)
    
   ]
   //...
  

见：https://material-ui.com/components/data-grid/rendering/#render-cell

【讨论】：

我很乐意提供帮助。

你还能帮我做一件事吗？我试图在每一行上呈现按钮，这样我就可以从该行的用户那里复制昵称，但我遇到了问题，因为所有按钮都在每一行上呈现，如您在此处看到的：codesandbox.io/s/wizardly-worker-t3yzd?file=/src/App.js我尝试使用 forEach也是，但它没有工作提前谢谢

当然，看我的编辑。这是你想要得到的吗？

对不起。我发送了错误的沙盒链接。检查此codesandbox.io/s/funny-rgb-0qhhu?file=/src/App.js 第 135 行。对于调试，使用世界 gentebra，老德鲁伊，最低 8 级最高 1000，您会看到它在每个单元格上生成每一行按钮，我只需要在每个单元格上渲染特定按钮。现在如果我有 50 个寄存器，它将在每个单元格上呈现 50 个复制按钮，包含每个寄存器的按钮

你不需要map函数，看编辑，也可以从ValueFormatterParams获取用户数据。试试 console.log(ValueFormatterParams)，你会看到你需要的数据。