镭不与工作做出反应路由器IndexLink组件

Question

Radium与之反应路由器IndexLink组件不起作用。我使用FAQ's method但这并不能解决问题。

这里是我的代码：

import React, {PropTypes} from 'react'; 
 
import {IndexLink} from 'react-router'; 
 
import {deepPurple500, deepPurple300, grey600} from 'material-ui/styles/colors'; 
 
import radium from 'radium'; 
 

 
import {default as rem} from 'helpers/calculateRem'; 
 

 
const DecoratedIndexLink = radium(IndexLink); 
 

 
/** 
 
* Link component. 
 
* 
 
* @param {Object} style 
 
* @param {String} to 
 
* @param {String} label 
 
* @param {Boolean} secondary 
 
*/ 
 
function Link({style, to, label, secondary}) { 
 
    const defaultStyle = { 
 
    textDecoration: 'none', 
 
    color: secondary ? grey600 : deepPurple500, 
 
    borderBottomWidth: rem(1), 
 
    borderBottomStyle: 'solid', 
 
    borderColor: secondary ? grey600 : deepPurple500, 
 
    ':hover': { 
 
     color: deepPurple300 
 
    } 
 
    }; 
 

 
    return <DecoratedIndexLink style={{...style, ...defaultStyle}} to={to}>{label}</DecoratedIndexLink>; 
 
} 
 

 
Link.prototype.propTypes = { 
 
    style: PropTypes.obj, 
 
    to: PropTypes.string, 
 
    label: PropTypes.string, 
 
    secondary: PropTypes.bool 
 
}; 
 

 
export default radium(Link);

我装点export default与镭，但有或没有也没什么变化。我甚至试图用button之类的DOM元素及其作品代替IndexLink，所以我想它完全与自定义组件有关。

对此案件的任何提示？

谢谢。

Answer 1

import React, {PropTypes} from 'react'; 
import {Link} from 'react-router'; 
import {deepPurple500, deepPurple300, grey600} from 'material-ui/styles/colors'; 
import radium from 'radium'; 

import {default as rem} from 'helpers/calculateRem'; 

const DecoratedLink = radium(Link); 

function Link({style, to, label, secondary) { 
    const defaultStyle = { 
    textDecoration: 'none', 
    color: secondary ? grey600 : deepPurple500, 
    borderBottomWidth: rem(1), 
    borderBottomStyle: 'solid', 
    borderColor: secondary ? grey600 : deepPurple500, 
    ':hover': { 
     color: deepPurple300 
    } 
    }; 

    return (
    <DecoratedLink style={[style, defaultStyle]} to={to} onlyActiveOnIndex> 
     {label} 
    </DecoratedLink>; 
); 
} 

Link.prototype.propTypes = { 
    style: PropTypes.obj, 
    to: PropTypes.string, 
    label: PropTypes.string, 
    secondary: PropTypes.bool 
}; 

export default radium(Link); 

如常见问题所示，Radium不会影响反应组件中自定义非DOM元素的样式。这意味着在导出时使用Radium装饰您的组件将不会影响自定义元素，例如react-router的Link或IndexLink。

镭确实提供了许多自定义元素工作的解决方法 - 在包装镭，自定义元素，如他们的榜样：Link = Radium(Link);。虽然这对于反应路由器的Link元素有效，但它不适用于IndexLink。这是因为IndexLink只返回一个Link元素与prop，onlyActiveOnIndex;镭被缠绕在IndexLink上，但不包裹它返回的Link元素。

由于各地IndexLink包裹镭是无效的，包镭围绕链接并传递到它的onlyActiveOnIndex道具。 <Link {...props} onlyActiveOnIndex />应有的功能完全一样<IndexLink {...props} />当与镭包裹将工作。

onlyActiveOnIndex上的文档：https://github.com/jaredly/react-router-1/blob/6fae746355e2679b12518c798d3ef0e28a5be955/docs/API.md#onlyactiveonindex