鐳不與工作做出反應路由器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