react native jsx中render return需要注意的地方

peachesTao

于 2019-06-14 10:41:26 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： React Native 文章标签： react native return

本文链接：https://blog.youkuaiyun.com/taoerchun/article/details/91952357

React Native 专栏收录该内容

24 篇文章

订阅专栏

本文详细探讨了在React中使用JSX语法时，大括号和元素标签与return语句位置关系的重要性。通过具体示例，阐述了不当的换行方式会导致的错误，并提供了正确的书写规范，帮助开发者避免常见陷阱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

看下面一个例子，定义一个MyModal组件，渲染hello world字样。

export default class MyModal extends Component {

    constructor(props) {
        super(props);

    };

    render() {
        return(
            <View>hello world</View>
        )
    }
}

一、以下方式则不会渲染任何结果，会报错。如果不是render下的根return不会报错，只是渲染内容为空

1、将“(”大括号换行

return
(
<View>hello world</View>
)

2、取消大括号 View标签换行

return
<View>hello world</View>

二、改成以下方式也是可行的

1、取消大括号，View标签和return同一行

return <View>hello world</View>

另外，如果在根组件外部使用js不能用“{}“包裹，但组件内部必须使用“{}“包裹起来

总结

大括号或者元素标签必须跟return在同一行，如果用了大括号则里面的元素标签可任意换行