Почему я должен использовать оператор распространения в этом элементе JSX?

Question

У меня есть функциональный компонент, который возвращает элемент привязки, который может иметь атрибуты href и role, в зависимости от props, которые ему передаются:

function Item(props) {
    return (
        <a {...props.toSubMenu && {role: 'button'}} {...props.href && {href: props.href}}>
            {props.children}
        </a>
    );
}

При создании этого компонент, я сначала попытался передать props без использования оператора распространения следующим образом: <a {props.toSubMenu && {role: 'button'}}>, но это дало мне ошибку:

Ошибка синтаксического анализа: неожиданный токен, ожидаемый "..."

Итак, на данный момент мой компонент работает так, как я хочу, но я не могу понять , почему я должен использовать оператор распространения . В других частях моего кода (как в строке 4) мне это не нужно. Я читал об этом в этом вопросе и в этом и в документации по реагированию , но я все еще не уверен.

Answer 1

Полагаю, вы хотите дать <a/> роль button в случае, если toSubMenu верно? И что вы просто хотите переслать href? В таком случае, будет ли работать следующее?

function Item(props) {
    return (
        <a role={props.toSubMenu ? 'button' : undefined} href={props.href}>
            {props.children}
        </a>
    );
}

Answer 2

В JSX {} не выводят строки, как это имеет место во многих языках шаблонов, вам нужно рассматривать это как присваивание, где левая рука - это свойство. Теперь, чтобы установить значение в зависимости от установки, просто следуйте той же логике c: чтобы объяснить, почему в сообщении об ошибке указано «...». Если {} не попадает в правую часть назначения, ожидается, что вы хотите распространить несколько свойств, поэтому попробуйте это

function Item(props) {
    return (
        <a role={props.toSubMenu ? 'button' : undefined} href={props.href}>
            {props.children}
        </a>
    );
}

Answer 3

• Я извлекаю это из вашего кода в качестве примера

function Item(props) {
    return (
        <a {...props.toSubMenu && {role: 'button'}} >
            {props.children}
        </a>
    );
}

• Предположим, props.toSubMenu не null
• после преобразования в чистый html: (это не работает вообще!)

function Item(props) {
    return (
        <a {role: 'button'} >
            {props.children}
        </a>
    );
}

• если вы используете оператор спреда, как это

function Item(props) {
    return (
        <a {...props.toSubMenu && ...{role: 'button'}} >
            {props.children}
        </a>
    );
}

• он будет растягивать объект {role: 'button'} как:

function Item(props) {
    return (
        <a role="button" >
            {props.children}
        </a>
    );
}

• одна вещь, на которую следует обратить внимание: в

{...props.toSubMenu && {role: 'button'}}

самое внешнее {} не является символом для object, это знак для code snippet для запуска в jsx файле.

Заключение

• вы не делаете необходимо использовать операцию распространения, это также работает

function Item(props) {
    return (
        <a role={props.toSubMenu && 'button'} >
            {props.children}
        </a>
    );
}

• , но поскольку role уже определено в props, почему бы просто не распространить его?