Radium不能与React路由器IndexLink组件一起使用

Question

Radium不能与React路由器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);

​

我用Radium装饰了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不能影响react组件中的自定义非DOM元素的样式。这意味着在导出时使用Radium装饰组件不会对自定义元素(如react-router的Link或IndexLink )产生任何影响。

Radium确实提供了一种适用于许多自定义元素的变通方法-将自定义元素包装在Radium中，例如它们的示例：Link = Radium(Link);。虽然这适用于react-router的Link元素，但它不适用于IndexLink。这是因为IndexLink只返回一个带有属性onlyActiveOnIndex的Link元素；Radium包装在IndexLink周围，但没有包装在它返回的Link元素周围。

由于在链接周围包装半径是无效的，所以在链接周围包装半径并传递onlyActiveOnIndex道具到其中。<Link {...props} onlyActiveOnIndex />的功能应该与<IndexLink {...props} />完全相同，并且在与Radium一起包装时也会正常工作。

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