jsx 中的元素道具

Posted 2023-02-21

【中文标题】jsx 中的元素道具

【英文标题】：Element props in jsx

【发布时间】：2020-07-28 22:33:01

【问题描述】：

在 render() 中描述某些元素时，我可以手动定义一些道具。例如

<ListItemText
    primary="Single-line item"
    secondary="Secondary text"
    className=classes.listItem
    primaryTypographyProps= textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" 
    secondaryTypographyProps= textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" 
/>

我可以在 makeStyles 中定义 JSX 中的一些属性。像这样：

listItem: 
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis'

但是如何定义上述**ListItemText**的所有props呢？

这样的事情给了我错误。我不能把对象放在对象里面。

listItem: 
    whiteSpace: 'nowrap',
    primaryTypographyProps= textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" 

这根本不起作用。 （不在className 也不在styles）

listItem: 
    primary:"Single-line item"
,

我的问题是 1.如何在jsx中发送这些属性？ 2. jsx中如何将对象放入对象中？

【问题讨论】：

您所说的 JSX 是 JSS。它不是指定元素属性，而是指定 CSS。您无法通过makeStyles 中指定的 CSS 控制元素属性。

【参考方案1】：

1.如何在 jsx 中发送这些属性？

不确定这究竟意味着什么。但是，如果您只是想创建一个对象并将其作为道具传递，那么您可以使用解构。

const listItemProps = 
    whiteSpace: 'nowrap',
    primaryTypographyProps:  textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" 
;

<ListItemText ...listItemProps />

如果不是这样，您需要在how to send these properties in JSX 声明中进一步澄清。

2。如何在 jsx 中将对象放入对象中？

这没有任何意义。 javascript 对象由 key-value 对组成。不管你是用 JSX 还是其他方式写的。

textOverflow: 'ellipsis', overflow: 'hidden', display:"inline" 不是对象内的对象。将对象作为道具传递给类/样式属性之类的东西只是 JSS 中的语法。

这实际上只是一个对象。在 react 中，当传递文本以外的属性时，表达式是用 编写的。这种 JSS 语法使用户可以做到这一点。下面也使用相同的概念。

<ListItemText max=1 checkByDefault=true />

上面也是JSS语法。以上1 和true 作为道具传递。在您的示例中，您将对象作为道具传递。它不是对象内的对象。

希望对你有帮助。