在 TS 中将 props 传递给 makeStyle
Posted
技术标签:
【中文标题】在 TS 中将 props 传递给 makeStyle【英文标题】:Passing props to the makeStyle in TS 【发布时间】:2020-12-24 19:18:16 【问题描述】:如何将post.mainImage
传递给backgroundImage
样式。
这是我的代码;
import React from 'react';
import Post from '../interfaces';
import makeStyles, createStyles, Theme from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
type Props =
post: Post;
const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
createStyles(
root:
maxWidth: '100%',
backgroundImage: ( post ) => post.mainImage
,
date:
margin: theme.spacing(1),
marginLeft: theme.spacing(2)
,
heroimage:
maxWidth: '100%',
height: 'auto',
objectFit: 'cover'
)
);
export default function HeroPost( post : Props)
const classes = useStyles( post );
return (
<Container className=classes.root>
<img alt=post.title src=post.mainImage className=classes.heroimage />
</Container>
);
下面的代码通过 linter 没有问题。但是还是取不到前面的backgroundImage
值。
【问题讨论】:
您应该创建一个最小的可重现示例(最好在 codesandbox 上) 【参考方案1】:您可以为makeStyles
的调用提供类型变量(注意第一个必须是主题类型,第二个必须是道具类型):
type Props =
post: Post;
;
const useStyles = makeStyles<Theme, Props>(theme =>
createStyles(
root:
maxWidth: '100%',
backgroundImage: ( post ) => `url("$post.mainImage")`
,
// ...
)
);
export default function HeroPost( post : Props)
const classes = useStyles( post );
return (
// ...
);
【讨论】:
我知道这个 hack 但正如上面提到的@Yatrix,可以通过 JS 但找不到 TypeScript 的解决方案。 修改了我的答案 - 这应该可以解决 TS 问题。 还是不行。我使用断点检查post
是否在backgroundImage: ( post ) => post.mainImage
上定义。不幸的是它=未定义。
你是通过post
或 post
到useStyles
吗?
CodeSandbox demo【参考方案2】:
您需要在要访问的地方直接传递带有其类型的道具。这应该可以正常工作。
type BgProps =
mainImage: string;
const useStyles = makeStyles<Theme, Props>((theme: Theme) =>
createStyles(
root:
maxWidth: '100%',
backgroundImage: (props: BgProps) => props.mainImage
,
date:
margin: theme.spacing(1),
marginLeft: theme.spacing(2)
)
);
【讨论】:
【参考方案3】:试试这个:useStyles 是一个钩子,它可以接受参数中的道具并返回方法 useStyles。
const useStyles = (props: Props) =>
const post = props;
return makeStyles(theme => (
root:
maxWidth: '100%',
backgroundImage: post.mainImage
,
))
【讨论】:
【参考方案4】:你像这样访问道具,
backgroundImage: props => props.backgroundImageProp
https://material-ui.com/styles/api/#returns-3
【讨论】:
这不起作用。必须与 TypeScript 相关。【参考方案5】:使用 Typescript 试试这个:
const useStyles = makeStyles(theme => (
root: (mainImage: mainImage: string) => (
...
backgroundImage: mainImage
)
)
const component: React.FC =>
const classes = useStyles(mainImage)
return ...
【讨论】:
以上是关于在 TS 中将 props 传递给 makeStyle的主要内容,如果未能解决你的问题,请参考以下文章
如何在 React 中将 props 传递给 jest 测试
TS 上 vue 中 props 不传递给 route.push