Question

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

我用镭装饰export default，但无论有没有改变都没有。我甚至尝试用IndexLink之类的DOM元素替换button及其作品，所以我猜它与自定义组件完全相关。

这个案子有什么暗示吗？

谢谢。

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＆＃39; Link或IndexLink。

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

由于在IndexLink周围包裹Radium无效，因此将Radium包裹在Link周围并将其传递给onlyActiveOnIndex prop。 <Link {...props} onlyActiveOnIndex />的功能应与<IndexLink {...props} />完全相同，并且在使用Radium包装时可以正常工作。

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

Radium不适用于React Router IndexLink组件

1 个答案: