類型錯誤：與在Safari

Question

陣營應用只讀分配錯誤我有以下微創官能陣營組分：

import React from 'react'; 
import { Button } from 'react-bootstrap'; 

var downloadBlobAsFile = (function closure() { 
    var a = document.createElement("a"); 
    a.style = "display: none"; 
    return function downloadBlobAsFile(blob, fileName) { 
    var objectURL = URL.createObjectURL(blob); 
    a.href = objectURL; 
    a.download = fileName; 
    document.body.appendChild(a); 
    a.click(); 
    setTimeout(function(){ 
     document.body.removeChild(a); 
     window.URL.revokeObjectURL(objectURL); 
    }, 100); 
    }; 
})(); 

class MyWidget extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     someData: "abcd1234..." 
    }; 
    this.handleDownloadClick = this.handleDownloadClick.bind(this); 
    } 

    handleDownloadClick() { 
    var d = new Date(); 
    var n = d.toISOString(); 
    var fn = "result-" + n + ".txt"; 
    if (this.state.someData) { 
     downloadBlobAsFile(new Blob([this.refs.dataContainer.innerHTML], {type: "plain/text"}), fn); 
    } 
    } 

    render() { 
    return (
     <div> 
     <Button value="download" onClick={this.handleDownloadClick}>Download</Button>; 
     <div className="hidden-container" ref="dataContainer">{this.state.someData}</div> 
     </div> 
    ) 
    } 
} 

export default MyWidget; 

的WebPack可以構建包含此組件束。

然而，在Safari 10.1，開發者控制檯報告以下致命錯誤：

TypeError: Attempted to assign to readonly property 

，應用程序不會在Safari中渲染。

這與下面的代碼塊：

var downloadBlobAsFile = (function closure() { 
    var a = document.createElement("a"); 
    a.style = "display: none"; 
    return function downloadBlobAsFile(blob, fileName) { 
    var objectURL = URL.createObjectURL(blob); 
    a.href = objectURL; 
    a.download = fileName; 
    document.body.appendChild(a); 
    a.click(); 
    setTimeout(function(){ 
     document.body.removeChild(a); 
     window.URL.revokeObjectURL(objectURL); 
    }, 100); 
    }; 
})(); 

如果我註釋掉的代碼塊，Safari瀏覽器將加載和渲染應用程序（雖然沒有從這個函數的功能）。

我不需要爲Chrome或Firefox客戶端註釋掉此塊，而只需Safari。

這個錯誤的原因是什麼？我可以採取哪些步驟來修改我的組件以允許在Safari客戶端上使用此功能？

Answer 1

的代碼行中downloadBlobAsFile()功能改變的是：

a.style = "display: none"; 

要：

a.style.display = "none"; 

這解決了只讀錯誤在Safari和其他客戶端保留功能。