reactJS：在这种情况下，如何摆脱findDOMNode？

我提出了一个可行的解决方案，根据以前的道具和下一个道具添加一个类或删除一个类，但它使用了

findDOMNode

，根据最佳实践，这应该避免。我在这里查看了一些示例，但在我的例子中，我看不到消除

findDOMNode

的最简单方法，因为它位于类生命周期方法中

export class Price extends React.Component {
  componentWillUpdate(nextProps, nextState) {
    console.log(this);
    if (nextProps.price !== this.props.price) {
      var element;
      if (nextProps.price >= this.props.price) {
        ReactDOM.findDOMNode(this).classList.add("upTick");
        element = ReactDOM.findDOMNode(this);
        setTimeout(function() {
          element.classList.remove("upTick");
        }, 10000);
      } else {
        ReactDOM.findDOMNode(this).classList.add("downTick");
        element = ReactDOM.findDOMNode(this);
        setTimeout(function() {
          element.classList.remove("downTick");
        }, 10000);
      }
    }
  }

  render() {
    return (
      <span className="price">
        {this.props.price.toFixed(2)}
      </span>
    );
  }
}

export class Price.Component{
组件将更新（下一步，下一步状态）{
console.log（this）；
if（nextrops.price！==this.props.price）{
var元素；
如果（nextrops.price>=此.props.price）{
ReactDOM.findDOMNode（this.classList.add）（“upTick”）；
element=ReactDOM.findDOMNode（this）；
setTimeout（函数（）{
元素.classList.remove（“upTick”）；
}, 10000);
}否则{
ReactDOM.findDOMNode（this.classList.add）（“downdtick”）；
element=ReactDOM.findDOMNode（this）；
setTimeout（函数（）{
元素。类列表。删除（“向下勾选”）；
}, 10000);
}
}
}
render（）{
返回(
{this.props.price.toFixed（2）}
);
}
}

您可以始终使用组件上的状态来设置“shouldShowUpTick”，然后根据状态在呈现方法中有条件地添加该类-然后您只需设置超时来添加/删除各种布尔状态，而条件类名称-类名称（）对于这种“条件类”方法非常有用

从“classnames”导入类名；
export class Price.Component{
组件将更新（下一步，下一步状态）{
if（nextrops.price！==this.props.price）{
如果（nextrops.price>=此.props.price）{
this.setState（{shouldShowUpTick:true}，（）=>{
setTimeout（函数（）{
this.setState（{shouldShowUpTick:false}））；
}, 10000);
}否则{
this.setState（{shouldShowDownTick:true}，（）=>{
setTimeout（函数（）{
this.setState（{shouldShowDownTick:false}））；
}, 10000);
}
}
}
render（）{
const classNames=classNames（'price'{
“向上勾选”：this.state.shouldShowUpTack，
“向下勾选”：this.state.shouldShowDown勾选
});
返回(
{this.props.price.toFixed（2）}
);
}
}

您可以始终使用组件上的状态来设置“shouldShowUpTick”，然后根据状态在呈现方法中有条件地添加该类-然后您只需设置超时来添加/删除各种布尔状态，而条件类名称-类名称（）对于这种“条件类”方法非常有用

从“classnames”导入类名；
export class Price.Component{
组件将更新（下一步，下一步状态）{
if（nextrops.price！==this.props.price）{
如果（nextrops.price>=此.props.price）{
this.setState（{shouldShowUpTick:true}，（）=>{
setTimeout（函数（）{
this.setState（{shouldShowUpTick:false}））；
}, 10000);
}否则{
this.setState（{shouldShowDownTick:true}，（）=>{
setTimeout（函数（）{
this.setState（{shouldShowDownTick:false}））；
}, 10000);
}
}
}
render（）{
const classNames=classNames（'price'{
“向上勾选”：this.state.shouldShowUpTack，
“向下勾选”：this.state.shouldShowDown勾选
});
返回(
{this.props.price.toFixed（2）}
);
}
}