为什么我无法渲染标题？

Question

我试图使Tech Stack出现在iOS模拟器的顶部。 相反，我的两个.js文件都收到了一个奇怪的错误，即使它们在语法上似乎正确。

错误消息：两个.js文件上的unexpected block statement surrounding arrow body arrow-body-style 。

我碰到了这个网站https://eslint.org/docs/rules/arrow-body-style，以获取更多信息以及对SO进行彻底搜索以寻求解决方案，但找不到任何东西。

（在两个.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

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

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

使用箭头功能[MDN Doc]有两种方法：

1-块主体：当使用{}并在主体内部需要显式返回时，当您具有一些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>
)

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

希望它会有所帮助。