Красивее конфликтует с? (знак вопроса и точка) в машинописной реакции внутри проп-скобок с синтаксической ошибкой

Question

Выражение

<Button
        title={props.children?.toString()}
        buttonStyle={$.buttonStyle}
        titleStyle={$.titleStyle}

      />

выдает следующую ошибку

SyntaxError: Expression expected.
title={props.children?.toString()}
                      ^

Есть ли способы исправить это?
Eslint с prettier-plugin выдает ту же ошибку. Проблема с синтаксическим анализатором. js

Answer 1

Возможно, вам потребуется обновить плагин typescript-eslint.

Answer 2

Проблема в новой версии Prettier 4.5.0
Если вы понижаете версию до версии 4.0.0 - ваша проблема рухнет:)

Answer 3

Если вы проверяете дочерние элементы таким образом, ошибок при воспроизведении не будет.

title = { props.children ? props.children.toString() : "" }

Но преобразовывать props.children в строку не имеет смысла, так как props.children тоже строка или набор JSX-элементов.