反应.js组件:用户定义的属性.我做得对吗

React.js component: user defined properties. Am i doing it right?

本文关键字：属性 组件 js 用户 定义 反应      更新时间：2023-09-26

我刚刚开始学习 React，我想知道如何存储一些任意变量。让我们以以下示例为例：

var StaffRow = React.createClass({
    doubleClickTimeout: null,
    waitingForDoubleClick: false,
    doubleClick: function(e){
        console.log('doubleClick');
    },
    singleClick: function(e){
        console.log('singleClick');
    },
    clickHandler: function(e){
        if(this.waitingForDoubleClick)
        {
            this.waitingForDoubleClick = false;
            clearTimeout(this.doubleClickTimeout);
            this.doubleClick(e);
        } else {
            this.waitingForDoubleClick = true;
            this.doubleClickTimeout = setTimeout(function() {
                this.waitingForDoubleClick = false;
                this.singleClick(e);
            }.bind(this), 300);
        }
    },
    render: function() {
        var name = "Some Name";
        return (
            <li onClick={this.clickHandler} >
                <span>{name}</span>
            </li>
        );
    }
});

我正在实现一个单击/双击处理程序。这工作得很好，但我想知道，这是否是存储一些随机属性（doubleClickTimeout 和 waitingForDoubleClick）的正确方法，或者污染 React 组件实例有一些警告，我不知道？谢谢。

虽然不是必需的，但我会删除第 2 行和第 3 行：

doubleClickTimeout: null,
waitingForDoubleClick: false,

并将它们设置在组件将挂载中。 原因是如果这些是对象/数组，它们将被使用上述的所有实例共享，而 componentWillMount 是一个函数，因此它们将是干净的引用。

componentWillMount: function(){
    this.doubleClickTimeout = null;
    this.waitingForDoubleClick = false;
}

经验法则是，如果它影响渲染，它必须处于状态或道具。 否则，实例属性是要走的路。

相关文章：