reactJS:在这种情况下如何摆脱findDOMNode?

时间:2017-08-27 07:30:17

标签: reactjs

我提出了一个工作解决方案,可以添加一个类或根据以前的道具和下一个道具删除一个类,但是它使用findDOMNode,根据最佳实践应该避免使用findDOMNode。我在这里查看了一些例子https://github.com/yannickcr/eslint-plugin-react/issues/678,但我看不出在我的情况下消除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> ); } } 的最简单方法,因为它在类生命周期方法中。

git clone git://github.com/ansible/ansible.git --recursive
source ansible/hacking/env-setup
chmod +x ansible/hacking/test-module
ansible/hacking/test-module -m ./timetest.py

1 个答案:

答案 0 :(得分:2)

你总是可以在组件上使用state来设置“shouldShowUpTick”,然后根据状态在render方法中有条件地添加该类 - 那么你只需设置超时来添加/删除各种布尔状态和条件classNames - 类名(npm module)对于这种“条件类”方法非常有用。

class MyClass
{
   public void Test()
   {
       Logger log=LogManager.GetLogger("MyClass");
       log.Info("Text");  // THIS TEXT IS NOT LOGGED OR DISPLAYED IN RICHTEXTBOX
   }
}