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

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>
)

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

希望能有所帮助。