Question

我是ReactJS的新手。以下功能效果很好：

_renderTable: function() {
    return(
        React.DOM.table(null,
            React.DOM.thead( {onClick: this._sort},
                React.DOM.tr(null,
                    this.props.headers.map(function (title, idx) {
                        if (this.state.sortby === idx) {
                            title += this.state.descending ? ' \u2191' : ' \u2193'
                        }
                        return React.DOM.th({key: idx}, title);
                    }, this)
                )
            ),
            React.DOM.tbody( {onDoubleClick: this._showEditor},
                this._renderSearch(),
                this.state.data.map(function (row, rowidx) {
                    return(
                        React.DOM.tr({key: rowidx},
                            row.map(function (cell, idx) {
                                var content = cell;

                                //To-Do editable field on double click
                                var edit = this.state.edit;
                                if (edit && edit.row === rowidx && edit.cell === idx) {
                                    content = React.DOM.form({onSubmit: this._save},
                                        React.DOM.input({
                                            type: "text",
                                            defaultValue: content,
                                        })
                                    );
                                }
                                return React.DOM.td({
                                    key: idx,
                                    "data-row": rowidx
                                }, content);
                            }, this)
                        )
                    );
                }, this)
            )
        )
    );
},

当我使用babel重写它时：

_renderTable: function() {
    return(
        <table>
            <thead onClick={this._sort}>
                <tr>{
                    this.props.headers.map(function (title, idx) {
                        if (this.state.sortby === idx) {
                            title += this.state.descending ? ' \u2191' : ' \u2193'
                        }
                        return <th key={idx}>{title}</th>
                    }, this)
                }</tr>
            </thead>
            <tbody onDoubleClick={this._showEditor}>
            {this._renderSearch()}
            {console.log("Hello", this.state)}
            {
                this.state.data.map(function (row, rowidx) {
                    return(
                        <tr key={rowidx}>{
                            row.map(function (cell, idx) {
                                var content = cell;
                                console.log("Hello2", this);
                                var edit = this.state.edit;
                                if (edit && edit.row === rowidx && edit.cell === idx) {
                                    content = <form onSubmit={this._save}>
                                                <input type="text" defaultValue={content}>
                                                </input>
                                            </form>
                                }
                                return <td key={idx}>{content}</td>
                            })
                        }</tr>
                    );
                })
            }
            </tbody>
        </table>
    );
},

我收到以下错误：

Uncaught TypeError: Cannot read property 'state' of undefined

将var edit = this.state.edit;替换为var edit = false;可消除该错误。

在函数主体中调用this时，搜索显示有关绑定float borderSize = 0.5; vec2 edgeDist; float insideDist; float outsideDist; float dist; if( (abs(MN.x) > abs(MN.y)) && (abs(MN.x) > abs(MN.z)) ) { // X major axis edgeDist = abs(M.zy) - 0.5 * vec2(sZ, sY); } else if( (abs(MN.z) > abs(MN.x)) && (abs(MN.z) > abs(MN.y)) ) { // Z major axis edgeDist = abs(M.xy) - 0.5 * vec2(sX, sY); } else { // Y major axis edgeDist = abs(M.zx) - 0.5 * vec2(sZ, sX); } insideDist = max(edgeDist.x, edgeDist.y); outsideDist = max(insideDist, borderSize); dist = (outsideDist - insideDist) / (2.0 * borderSize); eCoords = vec2(smoothstep(0.1, 1.0, dist));的信息，因此我尝试这样做但没有运气。由于非JSX版本的代码工作正常，因此不确定绑定中的问题。

Answer 1

这确实是一个范围问题，在遍历map时声明一个函数，在该函数内部使用this会引用另一个上下文。您可以使用箭头功能( ) => { ... }

this.state.data.map((row, rowidx) => {
    ...
    row.map((cell, idx) => { 
        ...
    }
})

或在地图函数this之前在另一个变量中为var self = this分配引用

var self = this
this.state.data.map(function (row, rowidx) {
    ...
    row.map((cell, idx) => { 
        var edit = self.state.edit;
        ...
    }
})

在React组件渲染函数中this.state未定义

1 个答案: