Javascript 在对象中添加HTML元素
我正在使用此数组状态在表上呈现信息: 正如你们所看到的,我需要在表的每一行上放置一个复制按钮,但我尝试将HTML直接插入到它自己的对象中,但失败了: 如何在表格的每一行上显示此复制按钮?Javascript 在对象中添加HTML元素,javascript,html,reactjs,object,Javascript,Html,Reactjs,Object,我正在使用此数组状态在表上呈现信息: 正如你们所看到的,我需要在表的每一行上放置一个复制按钮,但我尝试将HTML直接插入到它自己的对象中,但失败了: 如何在表格的每一行上显示此复制按钮? 提前感谢。这是: renderCell: (ValueFormatterParams) => { <a href="#">Oi </a>; // you are missing return statement } renderCell:(Valu
提前感谢。这是:
renderCell: (ValueFormatterParams) => {
<a href="#">Oi </a>; // you are missing return statement
}
renderCell:(ValueFormatterParams)=>{
;//您缺少返回语句
}
应该是:
renderCell: (ValueFormatterParams) => {
return (<a href="#">Oi </a>);
}
renderCell:(ValueFormatterParams)=>{
返回();
}
或:
renderCell:(ValueFormatterParams)=>()
编辑:从行获取数据:
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>)
}
]
//...
}
copyHanle=(项目)=>{
控制台日志(项目);
}
//...
render(){
常量列=[
//...
renderCell:(ValueFormatterParams)=>{
const{row}=ValueFormatterParams;
返回(
this.setState({copied:true})
>
复制
)
}
]
//...
}
请参阅:您的表组件正在将COLLMN值转换为字符串。您使用哪个库来呈现该表?我使用MaterialUI DataGrid查看有关如何实现自定义单元格呈现器的答案添加示例代码进行调试非常好。你们能帮我吗?我不知道如何使用@uke的答案,这里是代码沙盒:我很乐意帮忙。你能再帮我一件事吗?我试图在每一行上渲染按钮,这样我就可以从该行的用户那里复制昵称,但是我遇到了问题,因为所有按钮都在每一行上渲染,正如您在这里看到的:我也尝试了forEach,但它不起作用。谢谢您,请参阅我的编辑。这就是你想要的吗?对不起。我发送了错误的沙盒链接。检查第135行。为了调试,请使用world gentebra,elder druid,min level 8 highest 1000,您将看到它在每个单元格上生成每行按钮,我只需要渲染每个单元格上的特定按钮。现在,如果我有50个寄存器,它将在每个单元格上呈现50个复制按钮,包含每个寄存器的按钮。您不需要map函数,请参阅编辑,也可以从ValueFormatterParams获取用户数据。尝试console.log(ValueFormatterParams),您将看到所需的数据。
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>)
}
]
//...
}