javascript - Radium不适用于React Router IndexLink组件

Radium不适用于React Router 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，但是无论有没有装饰都没有改变。我什至尝试用IndexLink之类的DOM元素替换button及其作品，所以我想它与自定义组件完全相关。

这个案例有什么提示吗？

谢谢。

最佳答案

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

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

Radium确实提供了适用于许多自定义元素的解决方法-将自定义元素包装在Radium中，例如其示例：Link = Radium(Link);。虽然这对于react-router的Link元素有效，但对于IndexLink无效。这是因为IndexLink仅返回带有道具onlyActiveOnIndex的Link元素； Radium包裹在IndexLink周围，但没有包裹在返回的Link元素周围。

由于将Radium缠绕在IndexLink上是无效的，因此将Radium缠绕在Link上，并传递给它唯一的ActiveOnIndex属性。 <Link {...props} onlyActiveOnIndex />的功能应与<IndexLink {...props} />完全相同，并且在用Radium包裹时可以使用。

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