Question

我正在做这个本机反应项目，我使用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

你叫什么＆＃39; const＆＃39;实际上是一个箭头功能。在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版中使用了标准功能，但出现错误。以下是有关箭头功能的不错教程的链接。箭头功能将使小功能的编码更容易。我有一位教授，如果您使用广泛的小功能，谁会给您高分。您可以稍后再使用功能。

macro invocation structure

更新：尝试下面的代码，并将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>

   );
 }
}

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

3 个答案: