如何组合ReactJs的Router Link和material-ui组件(比如按钮)
How to combine ReactJs Router Link and material-ui components (like a button)?
我需要找到一个解决方案,以便能够将react路由器的功能与材料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吗?addComponentAsRefTo(…):只有一个ReactOwner可以有refs。你可能会添加一个ref到一个组件,而这个组件不是在组件的
render
方法中创建的,或者你加载了多个React副本(详细信息:https://gist.github.com/jimfb/4faa6cbfb1ef476bd105)。
你知道如何处理这种情况吗?谢谢你提前,如果你需要更多的信息,请告诉我
在新版本中这样做:
import { Link } from 'react-router-dom';
// ... some code
render(){
return (
<Button component={Link} to={'/my_route'}>My button</Button>
);
}
看这个帖子或者这个问题
这个适合我:
<FlatButton label="Details"
containerElement={<Link to="/coder-details" />}
linkButton={true} />
见https://github.com/callemall/material-ui/issues/850
<Button
size="large"
color="primary"
onClick={() => {}}
variant="outlined"
component={RouterLink}
to={{
pathname: `enter your path name`,
}}
>
Click Here
</Button>
你可以在使用typescript时尝试这种方法:
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>
);
})
Material UI button作为React Router link要用作React Router Link,你可以使用Button的组件prop。
import { Button } from '@mui/material';
import { Link } from 'react-router-dom';
export default function MyComponent() {
return (
<div>
<Button component={Link} to="/posts">
Posts
</Button>
</div>
);
}
相关文章:
- 是否有任何JavaScript UI组件可以显示字符串之间的差异
- OnsenUI、Angular和在警报对话框后刷新UI组件
- 如何使用Typescript为React设置Material UI
- 一些sencha/enyo风格功能的主干兼容UI/组件库
- 如何重新绘制Jquery中的所有UI组件
- react如何与修改html的javascript ui组件协同工作
- 将事件绑定到其他UI组件's函数,在Kendo MVVM中
- 正在将材质UI组件收集到一个文件中
- 在页面出口的PrimeFaces中检测客户端对UI组件的更改
- 什么是“已弃用.相反,使用可组合性“的意思在Reactjs Material-UI菜单项中
- Windows 8 Metro UI HTML 应用中的自定义可重用 UI 组件
- 如何在反应材料 ui 组件中调用方法
- React Native Android 原生 UI 组件中的自定义事件
- 在使用 react 和 material-ui 动态创建菜单项时,为什么 onTouchStart 会自动执行功能
- 如何扩展材料 UI 组件
- 加载时未显示 JQuery-ui 组件
- Material-ui:如何在嵌套组件中停止单击事件的传播
- React Router Link中触发链接的Material-UI组件
- 将material-ui封装到定制组件中
- 如何组合ReactJs的Router Link和material-ui组件(比如按钮)