es6：如何在 const 中定义函数？

Question

我正在做这个 react-native 项目，我正在使用 this method 来组织我的项目文件，但我不知道如何在 const 中声明函数。

import React from 'react';
import { View, ListView, Text } from 'react-native';

const Category = (props) => {

    const ds = ListView.DataSource({rowHasChanged : (r1, r2) => r1 !== r2});

    // how to declare function here?

    return (
        <View>
            <ListView
                dataSource={ds}
                renderRow={(rowData) => <Text>{rowData}</Text>}
                renderSeparator={// how to put function reference here?}
            />
        </View>
    );
}

Answer 1

你所说的'a const'实际上是一个箭头函数。 在 JS 中，你可以根据需要添加任何嵌套函数：

const Category = (props) => {

    const ds = ListView.DataSource({rowHasChanged : (r1, r2) => r1 !== r2});

    // how to declare function here?

    // You can declare another arrow function if you want:
    const foo = () => console.log('arrow');

    // Or a standard function
    function bar() { console.log('standard'); }

    // Even a function returning a function :-)
    function baz() { return function() {...} }

    const renderCustomComponent = () => <div>____</div>

    return (
        <View>
            <ListView
                dataSource={ds}
                renderRow={(rowData) => <Text>{rowData}</Text>}
                renderSeparator={ renderCustomComponent } {/* Here goes your reference */}
            />
        </View>
    );
}

Answer 2

这是在 React Native 的 const 中定义和使用函数的完整工作代码。

import React from 'react';
import { View, TouchableOpacity, Alert } from 'react-native';

const Card = (props) => {
  function onPressCard() {
    Alert.alert('You selected the card!');
  }

  return (
    <View style={styles.containerStyle}>
      <TouchableOpacity onPress={onPressCard}>
        {props.children}
      </TouchableOpacity>
    </View>
  );
};

const styles = {
  containerStyle: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 8,
    marginRight: 8,
    marginTop: 15,
  },
};

export default Card;

Answer 3

在最近的 React Native 版本 0.60 行中，您不能使用标准的函数声明。您必须使用箭头功能。我在 0.54 版中使用了标准函数，但出现错误。下面是一个关于箭头函数的不错教程的链接。箭头函数将使小函数的编码更容易。我之前有一位教授，如果你使用广泛的小功能，他会给你高分。以后可以重复使用函数。

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions/

更新： 试试下面的代码，将 ConsoleFunction 函数更改为不带箭头函数的标准函数。 React Native 会抛出错误。

import { StyleSheet, View, Button} from 'react-native';

export default class Mynewproject extends Component {

  ConsoleFunction=()=>{

    console.log(7);

    console.log( 8+9 );

    console.log("This is Console Message.");

  }

 render() {
   return (
      <View style={styles.MainContainer}>

        <Button onPress={this.ConsoleFunction} title='Click Here To Print Console' />

      </View>

   );
 }
}