Модификация объекта стиля React, кажется, портит стили dom

Question

Я почти уверен, что нашел ошибку React, но я хочу опубликовать вопрос здесь, прежде чем отправлять вопрос на Github.

Я сделаю ссылку на сокращенный тестовый пример, но вот поток данных:

1. У вас есть компонент React, и ему присвоен атрибут style={this.state.style}.

2. Вы setState, так что стильобъект теперь

   style={
     border: "1px solid red"
   }
   

3. Вы setState добавляете borderColor к этому свойству стиля

   style={
     border: "1px solid red"
     borderColor: "blue"
   }
   

4. Позже,Вы setState, чтобы удалить borderColor

   style={
     border: "1px solid red"
   }
   

Что произойдет, если вы сделаете это?Ну, твоя граница становится черной.Если вы осмотрите DOM, чтобы увидеть стили, примененные к вашему элементу, он будет выглядеть так:

border-width: 1px;
border-style: solid;
border-image: initial;

Излишне говорить, что это не то, чего я ожидаю.Кажется, что React делает что-то вроде перевода стиля DOM, и он не ведет себя должным образом.Кто-нибудь может объяснить, почему это происходит?

Вот кодовое поле с сокращенным тестовым примером, демонстрирующим поведение.

Answer 1

Это ошибка React, к сожалению.

https://github.com/facebook/react/issues/6348

Дело в том, что при удалении стиля borderColor React эффективно удаляет node.style.borderColor = '', чтобы удалить его, но это отменяет некоторые стили из borderсокращенное свойство.Надеюсь, мы когда-нибудь исправим это.

Обходной путь, как сказал Эндрю, заключается в индивидуальной установке свойств.

Answer 2

Это очень интересный вопрос.Все, что я могу сказать, это то, что я решил вашу проблему, явно задав цвет, ширину и стиль рамки.Затем переключите его на основе его стоимости.Вот ссылка codepen .

var Test = React.createClass({
  getInitialState: function(){
    return {
      styles: {
        borderWidth: '10px',
        borderStyle: 'solid',
        borderColor: 'red'
      }
    }
  },

  toggle: function() {
    this.setState(function(prevState) {
      var styles = prevState.styles

      if (styles.borderColor === 'red') {
        styles.borderColor = 'blue'
      } else {
        styles.borderColor = 'red'
      }

      console.log('new styles:')
      console.log( JSON.parse( JSON.stringify(styles) ) )

      return {
        styles: styles
      }
    })
  },

  render: function() {
    return (
      <div
        className="test"
        style={this.state.styles}
        onClick={this.toggle}
      >
        click me
      </div>
    );
  }
});

ReactDOM.render(<Test />, document.getElementById("app"));