В элементе React progress есть ошибка в IE10

Почему 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.

Ответ 1

После бесчисленных отчаянных попыток я обнаружил, что инвертирование порядка свойств (объявление max до value) устраняет проблему:

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

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

Я предполагаю, что React пытался установить значение, прежде чем устанавливать max, тогда значение будет обрезано до максимального значения по умолчанию, которое равно единице. Но я все еще хочу услышать лучшее объяснение от кого-то еще!

Ответ 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')
);

Это требует дальнейшего изучения, но вы можете использовать его так же, как сейчас.