为什么我无法渲染我的标题？

Question

我正在尝试将Tech Stack显示在iOS模拟器的顶部。相反，我在.js文件上遇到了一个奇怪的错误，即使它们看起来语法正确。

错误上显示unexpected block statement surrounding arrow body arrow-body-style个.js文件上的app.js。

我偶然发现了这个网站https://eslint.org/docs/rules/arrow-body-style以获取更多信息以及彻底搜索SO以获得解决方案但找不到任何内容。

（错误的位置在两个.js文件中都有注释）

我该如何纠正这个问题？

模拟器出错：

这是import React from 'react'; import { View } from 'react-native'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import reducers from './reducers'; import { Header } from './components/common'; const App = () => { // error is on this line return ( <Provider store={createStore(reducers)}> <View> <Header headerText="Tech Stack" /> </View> </Provider> ); }; export default App; ：

CardSection.js

这是import React from 'react'; import { View } from 'react-native'; const CardSection = (props) => { // error is on this line return ( <View style={styles.containerStyle}> {props.children} </View> ); }; const styles = { containerStyle: { borderBottomWidth: 1, padding: 5, backgroundColor: '#fff', justifyContent: 'flex-start', flexDirection: 'row', borderColor: '#ddd', position: 'relative' } }; export { CardSection };

react-native run-android

Answer 1

这意味着块体不需要使用简洁的身体，如下所示：

const App = () => (    // not {, use (
    <Provider store={createStore(reducers)}>
        <View>
            <Header headerText="Tech Stack" />
        </View>
    </Provider>
);

有两种方法可以使用 arrow function [MDN Doc] ：

1- Block Body：当使用{}并且在主体内部需要显式返回时，如果你有一些js逻辑，比如做一些计算，创建函数/变量，它会很有用。

示例：

const Hello = () => {
    const name = 'ABC';
    // other logic
    return (<div> Hello {name} </div>);
}

2-简洁的身体：如果您想直接返回某些内容，请使用()并且不需要返回。

Answer 2

好像您为项目启用了eslint。要摆脱这个eslint错误，您应该将App组件包装成括号，如下所示

const App = () => (
  <Provider store={createStore(reducers)}>
    <View>
      <Header headerText="Tech Stack" />
    </View>
  </Provider>
)

在这种情况下，不需要花括号。

希望它会有所帮助。