如何在 react native 中解决这个 JSX 错误？

Posted 2023-02-16

【中文标题】如何在 react native 中解决这个 JSX 错误？

【英文标题】：How to solve this JSX error in react native?

【发布时间】：2022-01-09 17:31:54

【问题描述】：

在包含 JSX for React native 的新 TS 文件上出现以下错误：

Unexpected token, expected ","

下面是我正在制作的组件的代码。错误似乎是

class TabLabel extends React.PureComponent<IReactionsLabelProps> 
    constructor(props: IReactionsLabelProps) 
        super(props);
    

    render = () => 
        const  name, baseUrl, getCustomEmoji, reactions, page, theme  = this.props;

        return (
            <View style= sharedStyles.tabView >
                <Emoji
                    content=name
                    standardEmojiStyle=sharedStyles.reactionEmoji
                    customEmojiStyle=sharedStyles.reactionCustomEmoji
                    baseUrl=baseUrl
                    getCustomEmoji=getCustomEmoji
                />
                <Text style=
                    ...sharedStyles.textBold, color: themes[theme].bodyText
                >
                     reactions[page]?.usernames?.length 
                </Text>
            </View>
        );
    

linter 在 JSX 第一行的 "style" 属性附近提供了一个不同的错误： 解析错误：“>”预期

我完全陷入困境，不知道出了什么问题。 完整文件可在https://github.com/RocketChat/Rocket.Chat.ReactNative/blob/b1f9916ed8f9a423e356987d934998a139809627/app/views/ReactionsView/index.ts#L45获取。

以下完全错误：

【问题讨论】：

你能给出完整的错误，包括行号吗？

尝试将您的文本样式更改为[sharedStyles.textBold, color: themes[theme].bodyText ]。

@Dan 那是原来的。将其更改为您现在看到的内容以尝试解决错误。

不相关，但是为什么这里是实例属性函数而不是原型函数呢？没什么大不了的，但在这种情况下似乎不必要地多余。

@DaveNewton 确实是冗余的。拼命尝试改变某些东西并让它发挥作用，但无济于事。

【参考方案1】：

我会回答我自己的问题。而且我现在觉得自己非常愚蠢，不用说，我花了好几个小时试图解决这个问题。

只需将文件的扩展名从 .ts 更改为 .tsx，就可以了。