在 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 ) =&gt; 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 =&gt; 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 测试

在 React TS 中将道具传递给孩子时出错

TS 上 vue 中 props 不传递给 route.push

如何在 React js 中将道具传递给 API URL?

在 Vue 3 Typescript 中将道具传递给数据对象

TypeScript:如何在 0.8.0.0 之后的版本中将 null 传递给重载函数?