如何使用 React 获取 html 格式的表格？答案

【问题标题】：How to get table in html format using react?如何使用 React 获取 html 格式的表格？
【发布时间】：2017-09-16 22:23:38
【问题描述】：

我在 jsx 页面上有以下语义-ui-react 表

<Table id='myTable' celled selectable sortable headerRow={['Id', 'Name']} renderBodyRow={this.renderBody} tableData={list}  />

我需要在调用方法中将此表放入html字符串

getHtmlTable() {
    var html = document.getElementById('myTable');
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}

并在post方法中获取：

[HttpPost("html")]
public void GetData(string html)
{        
}

如何获取 html 格式的表格？我在 jQuery 中找到了一个 .html() 函数，但不明白如何使用它。我试过了：

<div className="htmlData">
    <Table id='myTable' celled selectable sortable headerRow={['Id', 'Name']} renderBodyRow={this.renderBody} tableData={list}  />
</div>

getHtmlTable() {
    var html = $('htmlData').html();
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}

但它不起作用。有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery html reactjs .net-core

【解决方案1】：

你应该有合适的选择器让它工作：

var html = $('.htmlData').html();

或者使用纯 JS，您可以使用元素的 outerHtml 属性：

var html = document.querySelector("#myTable").outerHtml;

【讨论】：

这有助于在 js 中获取 html 字符串，因此当我调用 alert(html) 时，会显示带有正确 html 字符串的警报窗口。但它不会发送到 GetData 方法 - 收入值为 null
@Bashnia007，HttpPost("html") 是做什么的？尝试删除参数，也许它是一些限制之王？

【解决方案2】：

确保您的代码包含在 componentDidMount 中。 componentDidMount 在组件安装后立即调用。

componentDidMount

componentDidMount(){
  var html = document.getElementById('myTable').outerHTML
  this.getHtmlTable(html)
}
getHtmlTable(html) {
    $.ajax({
        type: "POST",
        url: "http://localhost:50000/api/table/",
        data: html,
        beforeSend: function() {
        },
        success:function() {
        }
    });
}

【讨论】：