javascript - React 进度元素在 IE10 上有一个错误

Question

为什么在使用 React 渲染进度元素时，无论我传入的值是什么，IE10(我还没有在 IE11 及更高版本中检查过)渲染值 1？

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

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

看看这个 fiddle - https://jsfiddle.net/co4wz3ft/5/

它在 Chrome 和 Firefox 中按预期工作。

Answer 1

经过无数次绝望的尝试，我发现颠倒属性的顺序(在 value 之前声明 max)可以解决问题:

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

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

我假设 React 试图在设置最大值之前设置值，然后值将被 trim 为默认的最大值，即 1。但我仍然渴望听到其他人的更好解释!