为什么我无法呈现我的标题？

Question

我试图让Tech Stack 出现在iOS 模拟器的顶部。相反，我的两个 .js 文件都出现了一个奇怪的错误，尽管它们在语法上看起来是正确的。

错误提示：unexpected block statement surrounding arrow body arrow-body-style 在两个 .js 文件上。

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

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

我该如何解决这个问题？

模拟器出错：

这里是app.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 };

Answer 1

您的项目似乎启用了eslint。要摆脱这个 eslint 错误，您应该将您的 App 组件包装到括号中，如下所示

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

这种情况下不需要大括号。

希望它会有所帮助。

Answer 2

表示不需要块体，使用简洁的体，像这样：

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

arrow function [MDN Doc]有两种使用方式：

1- 块体：当使用{} 并且在体内部需要显式返回时，当你有一些 js 逻辑比如做一些计算、创建函数/变量时它是有用的。 p>

例子：

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

2- 简洁的正文：当你想直接退货时，使用()，不需要return。