-1

在反应路由器教程的活动链接部分，他们建议以下使用活动链接。

您网站中的大多数链接不需要知道它们是活动的，通常只需要知道主要导航链接。包装它们很有用，这样您就不必记住您的 activeClassName 或 activeStyle 无处不在。

我们将在这里使用扩展运算符，即三个点。它克隆了我们的 props，在这个用例中，它将 activeClassName 克隆到我们想要的组件中，以便我们从中受益。

在 modules/NavLink.js 创建一个新文件，如下所示：

// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router'

export default React.createClass({
  render() {
    return <Link {...this.props} activeClassName="active"/>
  }
})

我很想知道是否有一种方法可以使以下模式起作用：

// modules/Navlink.js
import React from 'react'
import { Link } from 'react-router'

export default class extends Link {
    constructor(props) {
        super(props);
        props.activeClassName = 'active'
    }
}
4

1 回答 1

-1

使用 ES6 React 类，您可以super像上面那样调用。可以在声明类之后声明默认道具：

myClass.defaultProps = {
    activeClassName: 'active'
}

或者您可以在构造函数的参数中声明默认道具，如下所示：

export default class extends Link {
    constructor({firstProp, secondProp, thirdProp = "default value here"}) {
        super(props);
    }
}
于 2016-10-19T00:18:15.260 回答