Документация в 0.13 и 0.14 предупреждает, что стиль мутирования устарел, но не упоминайте, почему
Повторное использование и изменение объекта стиля между рендерами устарело
Что делать, если я хочу выполнять зависящие от состояния анимации элементы, которые не могут обрабатывать анимации css класса? Каждый раз клонировать объект?
Новое, чтобы отреагировать, помочь и посоветоваться с большим удовлетворением
Посмотрев на тестовый пример/ожидаемую ошибку, вы правы и должны клонировать объект.
Warning: `div` was passed a style object that has previously been
mutated. Mutating `style` is deprecated. Consider cloning it
beforehand. Check the `render` of `App`. Previous style:
{border: "1px solid black"}. Mutated style:
{border: "1px solid black", position: "absolute"}.
Я бы предположил, что это похоже на аргументацию для реквизита - это избавляет вас от передачи объекта изменяемого стиля по всему миру и в конечном итоге потеряет большую легкость в рассуждении о том, что React действительно помогает вам.
The props object is now frozen, so mutating props after creating a component element is no longer supported. In most cases, React.cloneElement should be used instead. This change makes your components easier to reason about and enables the compiler optimizations mentioned above.
Вы можете обойти эту проблему, скопировав предыдущий стиль в новую переменную и скопировав предыдущий объект стиля.
Пример:
Не разрешено
const {styleFromProps} = this.props;
const newStyle = styleFromProps['marginTop'] = '45px';
Разрешено
const {styleFromProps} = this.props;
const newStyle = {...styleFromProps, marginTop: '45px'};
Таким образом, вы ничего не мутируете, а просто создаете новый объект из предыдущего (например, styleFromProps)
Решение этой проблемы очень просто.
Плохой путь
<div style={this.props.style} />
Хороший способ
<div style={{ ...this.props.style }} />