Radium funktioniert nicht mit React Router IndexLink-Komponente

Question

Radium funktioniert nicht mit React Router IndexLink Komponente. Ich habe die FAQ's method verwendet, aber das behebt das Problem nicht.

Hier ist mein Code:

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);

ich die export default mit Radium dekorieren, aber nichts ändern mit oder ohne sie. Ich habe sogar versucht, IndexLink durch ein DOM-Element wie button und seine Werke zu ersetzen, also ich denke, dass es vollständig mit benutzerdefinierten Komponenten verwandt ist.

Irgendwelche Hinweise auf diesen Fall?

Vielen Dank.

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); 

Wie in den FAQs gezeigt, kann Radium den Stil von benutzerdefinierten, nicht-DOM-Elementen in Ihrer reaktiven Komponente nicht beeinflussen. Dies bedeutet, dass das Dekorieren Ihrer Komponente mit Radium beim Export keine Auswirkungen auf benutzerdefinierte Elemente wie die Link oder IndexLink des react-routers hat.

Radium stellt eine Problemumgehung zur Verfügung, die für viele benutzerdefinierte Elemente funktioniert - das Umschließen der benutzerdefinierten Elemente in Radium, wie in ihrem Beispiel: Link = Radium(Link);. Dies funktioniert zwar für das Link-Element des react-routers, funktioniert aber nicht für IndexLink. Dies liegt daran, dass IndexLink nur ein Link-Element mit der Prop, onlyActiveOnIndex; Radium ist um IndexLink gewickelt, aber nicht um das Link-Element gewickelt, das es zurückgibt.

Da Radium um IndexLink gewickelt wird, ist es unwirksam, wickle Radium um Link und gib die einzige ActiveOnIndex-Prop an. <Link {...props} onlyActiveOnIndex /> sollte genauso funktionieren wie <IndexLink {...props} /> und funktioniert, wenn es mit Radium umwickelt wird.

Dokumentation auf onlyActiveOnIndex: https://github.com/jaredly/react-router-1/blob/6fae746355e2679b12518c798d3ef0e28a5be955/docs/API.md#onlyactiveonindex