React：如何呈现 text/html http 响应？答案

【问题标题】：React: How to render a text/html http response?React：如何呈现 text/html http 响应？
【发布时间】：2021-02-25 11:08:03
【问题描述】：

我正在创建一个将 .xls 文件上传到服务器的应用程序，响应是 text/html 响应。我想预览响应（就像在开发人员工具中一样）。比如：

        axios.post(config.serverUrl + "/file", formData)
            .then(response => {

                //Preview response code
            }

我尝试了dangerouslySetInnerHTML={{ __html: {response.data} }}，但没有奏效。

响应示例：

<!DOCTYPE html><html><head><style>table, td{    border: 1px solid black;
    border-collapse: collapse;
    padding: 9px;
}</style><title>file3500064108648651012.tmp</title></head><body><table>
<tr><td>Sheet 1</td></tr>
<tr><td>Test</td><td>Test1</td><td>Test2</td></tr>
<tr><td>test</td><td>test1</td><td>test2</td></tr>
</table></body></html>

预览应如下所示：

<!DOCTYPE html><html><head><style>table, td{    border: 1px solid black;
    border-collapse: collapse;
    padding: 9px;
}</style><title>file3500064108648651012.tmp</title></head><body><table>
<tr><td>Sheet 1</td></tr>
<tr><td>Test</td><td>Test1</td><td>Test2</td></tr>
<tr><td>test</td><td>test1</td><td>test2</td></tr>
</table></body></html>

【问题讨论】：

您能否提供一个简短的响应示例以及您想要的行为？

标签： reactjs typescript axios httpresponse

【解决方案1】：

您可以使用dangerouslySetInnerHTML直接设置HTML：

 <div dangerouslySetInnerHTML={response} />

【讨论】：