[英]How to combine Material-table with Material-UI Dialog? (ReactJS)
[英]How to combine ReactJs Router Link and material-ui components (like a button)?
我需要找到一个解决方案,以便能够将 react router 的功能与 material ui 组件结合在一起。
例如,我有这个场景:一个路由器和一个按钮。 我试图做的是将它们混合在一起,并重新设计它们。
所以从一个简单的链接
<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>{name}</Link>
我尝试创建一个材质 ui 按钮如下
<Link className={this.getClass(this.props.type)} to={`${url}`} title={name}>
<FlatButton label={name} />
</Link>
但我有以下错误和 Javascript 中断
invariant.js?4599:38Uncaught Invariant Violation: addComponentAsRefTo(...): 只有 ReactOwner 可以有 refs。 您可能正在向未在组件的
render
方法中创建的组件添加 ref,或者您加载了多个 React 副本(详细信息: https : //gist.github.com/jimfb/4faa6cbfb1ef476bd105 )。
您知道如何处理这种情况吗? 预先感谢您,如果您需要更多信息,请告诉我
这对我有用:
<FlatButton label="Details"
containerElement={<Link to="/coder-details" />}
linkButton={true} />
<Button
size="large"
color="primary"
onClick={() => {}}
variant="outlined"
component={RouterLink}
to={{
pathname: `enter your path name`,
}}
>
Click Here
</Button>
使用打字稿时可以尝试这种方式:
import { NavLink as RouterLink } from "react-router-dom";
import {
Button,
Collapse,
ListItem,
makeStyles,
ListItemIcon,
ListItemText,
} from "@material-ui/core";
type NavItemProps = {
className?: string;
depth: number;
href?: string;
icon?: any;
info?: any;
open?: boolean;
title: string;
};
const NavItem: React.SFC<NavItemProps> = ({
const CustomLink = React.forwardRef((props: any, ref: any) => (
<NavLink
{...props}
style={style}
to={href}
exact
ref={ref}
activeClassName={classes.active}
/>
));
return (
<ListItem
className={clsx(classes.buttonLeaf, `depth-${depth}`)}
disableGutters
style={style}
key={title}
button
component={CustomLink}
{...rest}
>
<ListItemIcon>
{Icon && <Icon className={classes.icon} size="20" />}
</ListItemIcon>
<ListItemText primary={title} className={classes.title} />
</ListItem>
);
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.