从React中的事件处理程序中删除动态DOM节点的正确方法是什么？(what's the right way to remove dynamic DOM Nodes from an even

从React中的事件处理程序中删除动态DOM节点的正确方法是什么？(what's the right way to remove dynamic DOM Nodes from an event handler in React?)

DOM操作是JS库提供的最简单的东西。 但在反应中，动态必须处于状态。 只添加或删除简单的DOM节点变得非常困难。 也许这是React的缺点，或者我可能不知道其他任何方式。

看看这个 -

class Ripple extends React.Component { state = { ripples: [] } render() { const { className } = this.props; return ( <div onClick={this.rippleNow} className={`${className} material__ripple`}> {this.props.children} {this.state.ripples.map((Item, index) => ( <Item key={index} /> ))} </div> ); } rippleNow = ({ currentTarget, clientX, clientY }) => { const { x, y } = currentTarget.getBoundingClientRect(), { offsetHeight, offsetWidth } = currentTarget, dia = Math.min(offsetHeight, offsetWidth, 100); const styles = { top: (clientX - x) - dia / 2, left: (clientY - y) - dia / 2, width: dia, height: dia } const Wave = () => ( <div onAnimationEnd={this.removeRipple} style={styles}></div> ); this.setState(prev => { ripples: [...prev.ripples, Wave] }); } removeRipple = (e) => { // How will i remove that element? // Or is there any other way to do the same? } }

我将如何从州中删除元素？ 或者是否有任何其他方法可以添加或删除反应中的DOM元素。 由于反应不允许直接修改DOM。

我是一个真正的问题。 感谢那些甚至试图提供帮助的人。

DOM manipulation are the simplest stuff offered by a JS library. But in react everything dynamic has to be in the state. It becomes super diificult to just add or remove simple DOM nodes. Maybe this are the cons of React or probably I don't know any other way.

Take a look at this--

class Ripple extends React.Component { state = { ripples: [] } render() { const { className } = this.props; return ( <div onClick={this.rippleNow} className={`${className} material__ripple`}> {this.props.children} {this.state.ripples.map((Item, index) => ( <Item key={index} /> ))} </div> ); } rippleNow = ({ currentTarget, clientX, clientY }) => { const { x, y } = currentTarget.getBoundingClientRect(), { offsetHeight, offsetWidth } = currentTarget, dia = Math.min(offsetHeight, offsetWidth, 100); const styles = { top: (clientX - x) - dia / 2, left: (clientY - y) - dia / 2, width: dia, height: dia } const Wave = () => ( <div onAnimationEnd={this.removeRipple} style={styles}></div> ); this.setState(prev => { ripples: [...prev.ripples, Wave] }); } removeRipple = (e) => { // How will i remove that element? // Or is there any other way to do the same? } }

How will i remove the element from the state? Or is there any other way to add or remove DOM Elements in react . As react doesn't allow modifying DOM directly .

I am in a real problem . Thanks to those who'll even try to help .

最满意答案

通常不应该将元素本身存储在状态中。 在状态中存储<Wave />的地方，可以更有效地存储currentTarget ， clientX等，并在render()循环中生成react元素。 来自存档的反应文档

什么不该去州？ - React组件：基于底层的props和状态数据在render（）中构建它们。

反应材料-ui库有一个圆形的材料波纹，如果你需要一些在实践中如何完成的例子，你可以看一下。 以下是其纹波组件的来源 ，您可以通过单击此页面上的某些按钮来查看演示。

它的要点是它们只允许固定数量的纹波元素，并使用ReactTransitionGroup来处理启动和中止动画。 每次添加纹波时，纹波阵列的第一个元素都会被移除，并添加一个新项目。

但是，如果您不关心其中任何一项 - 您可以通过在调用removeRipple时从数组中删除第一个纹波来修复代码。 由于您总是将最新的纹波添加到数组的末尾，因此第一个纹波始终是最旧的纹波。

removeRipple = (e) => { // create a new element with the first element removed const [, ...shiftedRipples] = this.state.ripples; // update the state this.setState({ ripples: shiftedRipples }); }

You generally shouldn't be storing elements themselves in the state. Where you are storing <Wave /> in the state, you could much more efficiently store currentTarget, clientX, etc and generate the react element on the render() cycle. From the archived react docs

What shouldn't go in the state? - React components: Build them in render() based on underlying props and state data.

The react material-ui library has a circular material ripple that you can look at if you need some examples of how this is done in practice. Here is the source for their ripple component, and you can see a demo by clicking some of the buttons on this page.

The gist of it is that they only allow a fixed number of ripple elements, and use a ReactTransitionGroup to handle starting and aborting the animations. Each time a ripple is added, the first element of the ripple array is removed and a new item is added.

However, if you don't care about any of that - you can fix your code by just removing the first ripple from the array when you call removeRipple. Since you're always adding the newest ripple to the end of the array, the first one will always be the oldest one.

removeRipple = (e) => { // create a new element with the first element removed const [, ...shiftedRipples] = this.state.ripples; // update the state this.setState({ ripples: shiftedRipples }); }