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

Question

为什么IE10 (我没有签入IE11及更高版本)呈现值1，而不管我传递的值是什么，当使用React呈现进度元素时？

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中，它的工作原理与预期一样。

Answer 1

经过无数次不顾一切的尝试，我发现颠倒属性的顺序(在value之前声明value)解决了这个问题：

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

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

我假设React试图设置值，在设置max之前，值将被微调到默认的最大值，即1。但我还是很想从别人那里听到更好的解释！

Answer 2

你好，我这样更新了你的小提琴，它看起来很管用：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')
);

它需要进一步的调查，但你现在可以这样使用它。

​

​