Элемент реквизита в JSX

Question

При описании определенного элемента в 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" }}
/>

Я могу определить некоторые свойства в JSX в пределах makeStyles. Примерно так:

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

Но как определить все реквизиты вышеупомянутых **ListItemText**?

Что-то подобное дает мне ошибки. Я не могу поместить объект внутрь объекта.

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

, и это не работает вообще. (не в className и не в styles)

listItem: {
    primary:"Single-line item"
},

Мои вопросы 1. Как отправить эти свойства в jsx? 2. как поместить объект внутри объекта в jsx?

Answer 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 для передачи объекта в качестве реквизита для чего-то вроде атрибута класса / стиля.

На самом деле это на самом деле просто объект. В реакции выражения записываются в {} при передаче атрибутов, отличных от текста. Этот синтаксис JSS позволяет пользователю сделать это. Та же концепция используется и ниже.

<ListItemText max={1} checkByDefault={true} />

Выше также синтаксис JSS. Выше 1 и true передаются как реквизиты. В вашем примере вы передали объект как реквизит. Это не был объект внутри объекта.

Надеюсь, это поможет.