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

【问题标题】：How to solve this JSX error in react native?如何在 react native 中解决这个 JSX 错误？
【发布时间】：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 确实是冗余的。拼命尝试改变某些东西并让它发挥作用，但无济于事。

标签： javascript android reactjs typescript react-native

【解决方案1】：

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

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

【讨论】：