我正在尝试更新使用 React.createElement() 创建的对象。我试图更新的属性是particleCopy.props.style.top
。下面是我的代码。
import React, { useState } from 'react';
import './Particles.scss';
export default function Particles() {
const particleStyle = { color: 'blue', position: 'absolute', top: '0px' };
const [particle, setParticle] = useState(
React.createElement('div', { style: particleStyle }, '*')
);
const moveParticleDown = (particle, top) => {
const particleCopy = Object.assign({}, particle);
particleCopy.props.style.top = top + 'px';
setParticle(particleCopy);
};
return (
<div className="particles_container">
<div className="particles">{particle}</div>
<div className="controls">
<button onClick={() => moveParticleDown(particle, 10)}>down</button>
</div>
</div>
);
}
我收到以下错误
Uncaught TypeError: Cannot assign to read only property 'top' of object '#<Object>'
Your particleCopy
函数只是创建一个浅表副本particle
,这意味着你正在尝试改变对象particle
正在指向。你可以研究一个深度克隆库,或者,现在在 React 中似乎更惯用的方法是,将对象向下传播到你需要的范围内:
const particleCopy = {
...particle,
props: {
...particle.props,
style: {
...particle.props.style,
top: top + 'px'
}
}
}
setParticle(particleCopy);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)