Javascript 使用react+添加/删除动画类；重演

我想在某些事件上显示快速闪光动画（例如，每次不正确的按键都会出现红色边框闪光）

要对css动画执行此操作，我需要在每次想要触发flash时删除并添加动画类。（除非有其他方法重新触发动画？）

对于在github线程上执行此操作，有一些建议：

但是，在我的例子中，触发flash的状态是redux状态。而且在许多情况下，州政府实际上没有改变，因此不会导致重新招标

这是我得到的最好的解决方案，它包括设置一个随机数来强制重新渲染。有更好的方法吗

reducer.js

//Reducer function to update redux state
function setError(state, action) {    
    state.hasError = true; 
    state.random = Math.random(); 
    return state; 
}


export default function allReducers(state = initialState, action) {
  switch (action.type) {
    case ActionTypes.SUBMIT_VALUE_BUTTON:
      return Object.assign({}, state, setError(state, action));

    default:
      return state;
  }
}

反应组件和容器

const mapStateToProps = (state, ownProps) => {
  return {
    random: state.random,
    hasError: state.hasError, 
  }
}

componentWillReceiveProps() {
  this.setState({hasError: this.props.hasError});
  setTimeout(() => {
    this.setState({hasError: false});
  }, 300)
}


render() {
    return <div className = {`my-component ${this.state.hasError ? 'has-error':''}`} />; 

}

const-mapStateToProps=（state，ownProps）=>{
返回{
随机：state.random，
hasError:state.hasError，
}
}
组件将接收道具（）{
this.setState（{hasError:this.props.hasError}）；
设置超时（（）=>{
this.setState（{hasError:false}）；
}, 300)
}
render（）{
返回；
}

编辑：值得注意的是，redux文档指出，不应在reducer方法中调用非纯函数，如Math.random

在减速器内不应执行的操作：

调用非纯函数，例如Date.now（）或Math.random（）

---

你的代码有一些问题，我会一个接一个的

不能在减速机上更改状态对象。这是来自redux的：

请注意：

我们不会改变国家。我们使用Object.assign（）创建一个副本。 赋值（状态为{visibilityFilter:action.filter}）也是 错误：它将变异第一个参数。你必须提供一个空的 对象作为第一个参数。还可以启用对象排列 操作员建议改为写入{…state，…newState}

在您的代码中，setError将状态作为道具接收并对其进行变异<代码>设置错误应如下所示：

function setError(state, action) {    
    let newState = Object.assign({}, state);
    newState.hasError = true; 
    newState.random = Math.random(); 
    return newState; 
}

componentWillReceiveProps(nextProps) {
  if (nextProps.hasError !== this.props.hasError && nextProps.hasError){
     setTimeout(() => {
      // Dispatch redux action to clear errors
    }, 300)
  }
}

第二个问题可能是因为缺少一些代码，但我看不到您何时将状态更改回无错误状态，因此道具不会真正更改

在您的

组件中，将接收props

您的引用

this.props

而不是

nextrops

组件将接收道具

应如下所示：

function setError(state, action) {    
    let newState = Object.assign({}, state);
    newState.hasError = true; 
    newState.random = Math.random(); 
    return newState; 
}

componentWillReceiveProps(nextProps) {
  if (nextProps.hasError !== this.props.hasError && nextProps.hasError){
     setTimeout(() => {
      // Dispatch redux action to clear errors
    }, 300)
  }
}

在组件中，您应该检查道具，而不是声明获取道具会导致重新渲染（除非在

componentshoulldupdate

中停止渲染）：

render（）{
返回；
}

您的代码中有一些问题，我会逐一解决

不能在减速机上更改状态对象。这是来自redux的：

请注意：

我们不会改变国家。我们使用Object.assign（）创建一个副本。 赋值（状态为{visibilityFilter:action.filter}）也是 错误：它将变异第一个参数。你必须提供一个空的 对象作为第一个参数。还可以启用对象排列 操作员建议改为写入{…state，…newState}

在您的代码中，setError将状态作为道具接收并对其进行变异<代码>设置错误应如下所示：

function setError(state, action) {    
    let newState = Object.assign({}, state);
    newState.hasError = true; 
    newState.random = Math.random(); 
    return newState; 
}

componentWillReceiveProps(nextProps) {
  if (nextProps.hasError !== this.props.hasError && nextProps.hasError){
     setTimeout(() => {
      // Dispatch redux action to clear errors
    }, 300)
  }
}

第二个问题可能是因为缺少一些代码，但我看不到您何时将状态更改回无错误状态，因此道具不会真正更改

在您的

组件中，将接收props

您的引用

this.props

而不是

nextrops

组件将接收道具

应如下所示：

function setError(state, action) {    
    let newState = Object.assign({}, state);
    newState.hasError = true; 
    newState.random = Math.random(); 
    return newState; 
}

componentWillReceiveProps(nextProps) {
  if (nextProps.hasError !== this.props.hasError && nextProps.hasError){
     setTimeout(() => {
      // Dispatch redux action to clear errors
    }, 300)
  }
}

在组件中，您应该检查道具，而不是声明获取道具会导致重新渲染（除非在

componentshoulldupdate

中停止渲染）：

render（）{
返回；
}

Redux状态应该是不可变的！您必须理解为什么您的操作不会触发呈现调用。@MotiKorets我可能用错了词。显然，redux状态可以更新。它不触发渲染调用的原因是，例如，如果

state.hasError===false

，我尝试使用

对象再次将其重置为false。assign

redux不会检测到它。I“我说的是代码

setError

清楚地改变了不应该做的状态。Reducer是一个函数，它接收旧的状态和动作并返回新的状态。在任何情况下，组件都有内部状态，所以我真的不明白为什么需要它来感知redux。@MotiKorets这只是reducer函数。为了清楚起见，我会再补充一点。我认为完整的组件代码会有所帮助。并考虑重写它没有重复，因为我觉得它只是在你的方式在这里。您必须理解为什么您的操作不会触发呈现调用。@MotiKorets我可能用错了词。显然，redux状态可以更新。它不触发渲染调用的原因是，例如，如果

state.hasError===false

，我尝试使用

对象再次将其重置为false。assign

redux不会检测到它。I“我说的是代码

setError

清楚地改变了不应该做的状态。Reducer是一个函数，它接收旧的状态和动作并返回新的状态。在任何情况下，组件都有内部状态，所以我真的不明白为什么需要它来感知redux。@MotiKorets这只是reducer函数。为了清楚起见，我会再补充一点。我认为完整的组件代码会有所帮助。并考虑改写它没有重复，因为我觉得这只是你的方式。嗨，谢谢你的答复。1.我并不是在直接操纵国家。请注意，allReducers方法中有object.assign。2.谢谢你指出这一点。看起来我无论如何都应该使用

getDerivedStateFromProps

。3.之所以要提到状态，是因为它是随机数引起的