React progress element在IE10上有一個bug

爲什麼IE10（我沒有在IE11及以上版本中檢查過）渲染值1，無論我傳入的值是什麼，當使用React渲染一個progress元素時？React progress element在IE10上有一個bug

var Hello = React.createClass({ 
    render: function() { 
    return <progress value="50" max="100"></progress>; 
    } 
}); 

ReactDOM.render(
    <Hello />, 
    document.getElementById('container') 
);

看看這個小提琴 - https://jsfiddle.net/co4wz3ft/5/

它將按預期在Chrome和Firefox瀏覽器。

來源

2016-08-09 Hugo Silva

IE 10應該支持進度。也許，它忽略了最大屬性。如果max屬性被忽略，值應該在0和1之間。 – vijayst

@Vijay - 你看過小提琴嗎？簡單的HTML進度呈現得很好。只有React版本有問題。它可能是被忽略的最大屬性。但爲什麼？ –

我在Chrome中檢查了小提琴。我沒有IE。 React在IE中使用相同的方式渲染還是使用某種polyfill？ – vijayst

無數絕望的嘗試後，我發現反轉性質（聲明maxvalue之前）的順序修復該問題：

var Hello = React.createClass({ 
    render: function() { 
    return <progress max="100" value="50"></progress>; 
    } 
}); 

ReactDOM.render(
    <Hello />, 
    document.getElementById('container') 
);

我認爲反應是想設置的值，在設置最大值之前，值將被修整爲默認最大值，即1。但我仍然渴望聽到別人更好的解釋！

來源

2016-08-17 20:57:31

你，先生，應該喝三杯啤酒。這應該被標記爲解決方案。 –

另一個來自我。所以愚蠢的錯誤！ :)這不僅與IE10相關，我使用Edge引擎呈現的Windows 10 UWP應用也重現了它。 – mjzr

這似乎是正確的答案。另一種解決方案只是利用了這樣一個事實，即如果max沒有被指定，那麼它假定它是1.如果我們先指定max，那麼我們可以按照預期使用它。 – Malenx

你好，我已經更新了你的小提琴這樣的，它似乎工作：https://jsfiddle.net/co4wz3ft/11/

var Hello = React.createClass({ 
    render: function() { 
    return <progress value="0.7"></progress> 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
);

還需要進一步調查，但現在你可以使用它像這種權利。

來源

2016-08-14 20:30:01

確認它可以在虛擬機中使用IE10，包裝它在一個div中防止它變成一個反應組件？ – derp

@derp它已經是一個React組件，用div封裝或不包裝。你可以回到只有''這個元素，這樣會更好。我會在答案中更新代碼:) –

React progress element在IE10上有一個bug

回答

相關問題