Question

我想使用react和material-ui以及withStyles导出带样式的文本链接组件，但我的代码会返回：

Acorn错误：速记属性分配仅在解构模式（14：9）

第14行的断点

12  exports.default = styles_1.withStyles({
13      text,
14      type = "", // Error happens here
15      align = "",
16      className = "",
17      to = "",
18  })(styles);

代码引用TextLink组件：

import TextLink from '../components/TextLink'

<div>
    <TextLink to="/sign-up" type="body1" align="center" className="testing" text="Sign up" />
</div>

Textlink组件：

import * as React from 'react';
import { Link } from "react-router-dom";
import Typography from 'material-ui/Typography';
import { withStyles } from 'material-ui/styles';
import * as PropTypes from 'prop-types'

const styles = {
  testing: {
    color: 'green'
  },
};

export default withStyles({
  text, 
  type = "",
  align = "",
  className = "",
  to = "",
})(styles) =>
  <Typography 
    type={`${type}`} 
    align={`${align}`}> 
      <Link
        to={`${to}`}
        className={`${className}`}
      > 
        {text}
      </Link>
  </Typography>;

编辑：回应蒂莫的回答。 textlink组件工作正常，没有像这样的样式：

export default ({
  text, 
  type = "",
  align = "",
  className = "",
  to = ""
}) =>
  <Typography 
    type={`${type}`} 
    align={`${align}`}> 
      <Link
        to={`${to}`}
        className={`${className}`}
      > 
        {text}
      </Link>
  </Typography>;

Answer 1

这不是你在JS中定义对象的方式。

使用冒号将键与值分开：

exports.default = styles_1.withStyles({
    text,
    type: "",
    align: "",
    className: "",
    to: ""
})(styles);

如何导出反应材料-ui组件

1 个答案: