jsx 中的元素道具答案

【问题标题】：Element props in jsxjsx 中的元素道具
【发布时间】：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 控制元素属性。

标签： reactjs material-ui

【解决方案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 作为道具传递。在您的示例中，您将对象作为道具传递。它不是对象内的对象。

希望对你有帮助。

【讨论】：