Javascript 如何访问this.context.router（ReactJS）

这是我的代码：

import React from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'
import sampleSystems from '../sample-systems';

class SystemTable extends React.Component {
constructor() {
    super();

    this.state = {
        data: sampleSystems
    }
}

render() {
    function osName(cell, row) {
      return cell.name;
    }

    function batteryCondition(cell, row) {
      return cell.condition;
    }

    var selectRowProp = {
      mode: "checkbox", 
      bgColor: "rgb(204, 230, 255)"
    };  

    var tableOptions = {
        sizePerPage: 5,
        deleteText: "✗ Delete Selected",
        paginationSize: 3,
        clearSearch: true,
        hideSizePerPage: true,
        onRowClick: function(row) {
            const systemId = row._id;
            this.context.router.transitionTo(`/system/${systemId}`);
        }
};

    return (
        <BootstrapTable 
            className="react-bs-table"
            data={this.state.data.systems}
            striped={true}
            hover={true}
            pagination={true}
            selectRow={selectRowProp}
            deleteRow={true}
            multiColumnSearch={true}
            search={true}
            ignoreSinglePage={true}
            options={tableOptions}
            >
          <TableHeaderColumn dataField="_id" isKey={true} dataAlign="center" 
            searchable={false}>ID</TableHeaderColumn>
          <TableHeaderColumn dataField="serialnumber" dataAlign="center"
            searchable={false}>Serial Number</TableHeaderColumn>
          <TableHeaderColumn dataField="model" dataAlign="center" 
            dataSort={true}>Model</TableHeaderColumn>
            <TableHeaderColumn dataField="os" dataAlign="center" dataSort={true} 
                dataFormat={osName} filterValue={osName}>OS</TableHeaderColumn>
            <TableHeaderColumn dataField="battery" dataAlign="center" dataSort={true} 
                dataFormat={batteryCondition} filterValue={batteryCondition}>
                Battery Condition</TableHeaderColumn>
        </BootstrapTable>
    )
    }
}

SystemTable.contextTypes = {
    router: React.PropTypes.object
}

export default SystemTable;

---

每当您想要使用

React

组件的

context

属性时，您必须声明它们的类型，就像属性验证一样。在您的案例中，使用ES6类，它是这样完成的：

static contextTypes = {
    router: React.PropTypes.object
}

但是，考虑在评论中指出路由器的升级，因为看起来你使用的是旧版本。它可能工作正常，但是其中一些功能不稳定，将来可能会中断

---

ExtNote：你似乎在使用可怕的ES6特征和语法（走的路！），所以不要再考虑使用<代码> var >代码>，而是切换到<代码>让。这是一个很小的细节，可能会让你省去一些麻烦。

每当你想使用

React

组件的

上下文
属性时，你必须声明它们的类型，就像道具验证一样。在您的案例中，使用ES6类，它是这样完成的：

static contextTypes = {
    router: React.PropTypes.object
}

但是，考虑在评论中指出路由器的升级，因为看起来你使用的是旧版本。它可能工作正常，但是其中一些功能不稳定，将来可能会中断

 ExtNote：你似乎在使用可怕的ES6特征和语法（走的路！），所以不要再考虑使用<代码> var >代码>，而是切换到<代码>让。这是一个小细节，可能会让你在接下来的过程中省去一些麻烦。
要在更深层次上访问路由器，你可以使用它

然后它将拥有
this.props.router

或者你也可以

请注意，在路由中直接引用的组件将已经具有
this.props.router

请注意，您没有提到正在使用的版本，这是最新版本。
要在更深层次上访问路由器，您可以使用

然后它将拥有
this.props.router

或者你也可以

请注意，在路由中直接引用的组件将已经具有
this.props.router

请注意，您没有提到您正在使用的版本，这是最新版本。
您的问题是在
函数中使用
this.context
，在您的情况下，这将导致
this
成为您的
tableOptions
对象，而不是组件类

有几种方法可以解决此问题：

1） 创建函数时绑定此

var tableOptions = {
    /* ... */
    onRowClick: function(row) {
        const systemId = row._id;
        this.context.router.transitionTo(`/system/${systemId}`);
    }.bind(this)
};

2） 将此
存储在变量中

var _this = this;
var tableOptions = {
    /* ... */
    onRowClick: function(row) {
        const systemId = row._id;
        _this.context.router.transitionTo(`/system/${systemId}`);
    }
};

3） 使用ES6箭头功能

var tableOptions = {
    /* ... */
    onRowClick: row => {
        const systemId = row._id;
        this.context.router.transitionTo(`/system/${systemId}`);
    }
};

例如，您可以在上阅读有关
this
的更多信息。
您的问题是在
函数
中使用
this.context
，在您的情况下，这将导致
this
成为您的
表选项
对象，而不是组件类

有几种方法可以解决此问题：

1） 创建函数时绑定此

var tableOptions = {
    /* ... */
    onRowClick: function(row) {
        const systemId = row._id;
        this.context.router.transitionTo(`/system/${systemId}`);
    }.bind(this)
};

2） 将此
存储在变量中

var _this = this;
var tableOptions = {
    /* ... */
    onRowClick: function(row) {
        const systemId = row._id;
        _this.context.router.transitionTo(`/system/${systemId}`);
    }
};

3） 使用ES6箭头功能

var tableOptions = {
    /* ... */
    onRowClick: row => {
        const systemId = row._id;
        this.context.router.transitionTo(`/system/${systemId}`);
    }
};

例如，您可以在上阅读有关此
的更多信息。
您使用的是旧版本的react router吗？这是我正在使用的react路由器的版本：4.0.0-alpha.3Oh也许我当时错了，但我不认为它已经转换了！所以我的答案应该适用于您，尽管是针对V3，为什么他的React组件不是无状态的？这是因为缺乏良好的设计吗？是的，我会这么说@Prostiar你使用的是旧版本的react路由器吗？这是我正在使用的react路由器的版本：4.0.0-alpha.3Oh也许我当时错了，但我不认为它已经转换了！所以我的答案应该适用于您，尽管是针对V3，为什么他的React组件不是无状态的？这是不是缺少好的设计？是的，我会这么说@prostiYeah，这绝对是一条路，因为即使在引擎盖下它也使用了
上下文
，但它将经受时间的考验，因为任何更新都将应用到这条线路上。我如何才能在
onRowClick:function（row）{
中添加它呢？这就是我对browserHistory的尝试：
import{browserHistory}来自“react router”；onRowClick:function（row）{const systemId=row.\u id；browserHistory.push（
/system/${systemId}
）；}
Nah，无论何时您想要使用它，您都不能从
react router
导入browserHistory对象，因为它每次都是一个新对象。您应该在
路由器
中初始化一次，然后使用类似
with Router
的方法访问
推送
方法。只要这个组件是你的
路由器的子组件，那么它就应该可以工作。是的，这肯定是一种方式，因为即使在引擎盖下它也使用
上下文，它将经受时间的考验，因为任何更新都会应用到下一行。我如何才能在
onRowClick:function（row）{
？这就是我对browserHistory的尝试：
import{browserHistory}来自“react router”；onRowClick:function（row）{const systemId=row.\u id；browserHistory.push（
/system/${systemId}
）；}
Nah，无论何时您想要使用它，您都不能从
react router
导入browserHistory对象，因为它每次都是一个新对象。您应该在
路由器
中初始化一次，然后使用类似
with Router
的方法访问
推送
方法。只要此组件是您的
路由器的子组件，它就应该可以工作。谢谢，我会确保进行这些更改，我非常感谢您提供更好的编码技巧。我已经在我的代码中包含了这一点：
SystemTable.contextTypes={router:React.PropTypes.object}
这和使用静态有什么不同吗？不，这是一样的：）完全是样式，所以无论你喜欢什么，谢谢你，我一定要做这些更改，我总是很感激任何关于打赌的提示