Reactjs React-意外标记，应为；

抛出的错误是：意外标记，应为；(9:16) 这指向renderNumbers（）函数的第一行。我的语法有什么问题？我有点困惑，需要改变什么才能让它工作

import React, { PropTypes } from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity
} from 'react-native';

renderNumbers() {
  return this.props.numbers.map(n =>
    <Text>{n}</Text>
  );
}


export default class Counter extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.appName}>
          Countly
        </Text>
        <Text style={styles.tally}>
          Tally: {this.props.count}
        </Text>
        <Text style={styles.tally}>
          Numbers: {this.props.numbers}
        </Text>
        <View>
          {this.renderNumbers()}
        </View>
        <TouchableOpacity onPress={this.props.increment} style={styles.button}>
          <Text style={styles.buttonText}>
            +
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.props.decrement} style={styles.button}>
          <Text style={styles.buttonText}>
            -
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.props.power} style={styles.button}>
          <Text style={styles.buttonText}>
            pow
          </Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.props.zero} style={styles.button}>
          <Text style={styles.buttonText}>
            0
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

Counter.propTypes = {
  count: PropTypes.number,
  numbers: PropTypes.func,
  increment: PropTypes.func,
  decrement: PropTypes.func,
  zero: PropTypes.func,
  power: PropTypes.func
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  appName: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10
  },
  tally: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 20,
    fontSize: 25
  },
  button: {
    backgroundColor: 'blue',
    width: 100,
    marginBottom: 20,
    padding: 20
  },
  buttonText: {
    color: 'white',
    textAlign: 'center',
    fontSize: 20
  }
});

import React，{PropTypes}来自'React'；
进口{
样式表，
看法
文本，
可触摸不透明度
}从“反应本机”；
renderNumbers（）{
返回这个.props.numbers.map（n=>
{n}
);
}
导出默认类计数器扩展React.Component{
render（）{
返回(
伯爵
计数：{this.props.count}
数字：{this.props.Numbers}
{this.renderNumbers（）}
+
-
战俘
0
);
}
}
Counter.propTypes={
计数：PropTypes.number，
编号：PropTypes.func，
增量：PropTypes.func，
减量：PropTypes.func，
零：PropTypes.func，
电源：PropTypes.func
};
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”
},
应用程序名：{
尺寸：20，
textAlign:'中心'，
差额：10
},
理货：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:20，
尺寸：25
},
按钮：{
背景颜色：“蓝色”，
宽度：100，
marginBottom:20，
填充：20
},
按钮文字：{
颜色：'白色'，
textAlign:'中心'，
尺寸：20
}
});

---

谢谢您的帮助。

您不应该使用

函数renderNumbers（）

？看起来

renderNumbers

不是类

计数器的方法，而是代码中的单个函数

顺便说一句，
renderNumbers
定义了两次，尽管这是合法的，不是问题的原因

编辑：

如果要将
renderNumbers（）
声明为类
计数器的一部分，请在类内定义它：

export default class Counter extends React.Component {

    renderNumbers() {
       ...
    }

    ...

}

否则，使用关键字
函数
定义：

这只是ES6的语法。
组件出现此错误的原因是：
1.如果在ES6类之外定义函数，则必须使用
function
关键字。如果这样做，调用该函数时，
this
引用将是未定义的。
2.如果在React组件（只是一个ES6类）中定义函数，则不需要在函数定义前面使用“function”关键字

备选案文1：

function renderNumbers() {
    return <Text>...</Text>
}

class Counter extends React.component {
  render() {
   /* Render code... */
  }
}

函数renderNumbers（）{
返回。。。
}
类计数器扩展了React.component{
render（）{
/*渲染代码*/
}
}

备选案文2：

class Counter extends React.component {
  renderNumbers() {
    return <Text>...</Text>
  }
  render() {
   /* Render code... */
  }
}

类计数器扩展React.component{
renderNumbers（）{
返回。。。
}
render（）{
/*渲染代码*/
}
}

出现所述错误的原因是，Javascript编译器认为您在“调用”而不是“定义”
renderNumbers（）
。所以…它到达
）
并期望换行符或
{
并抛出一个错误

如果使用选项2调用
renderNumbers（），请不要忘记使用
this
关键字
很抱歉RenderNumber是两次。这不是问题。应该在发布到这里之前将其删除。@Wasteland请检查我的第一句话。“函数”一词不是仅用于无状态组件吗？当它是类组件时，它应该是nameOfFunction（）{}.我说的对吗？谢谢Philip Tzou，你的回答帮助了我…我还有一个疑问，如果我在类中定义了变量声明，也会发生此错误，否则如果我在呈现中定义了变量声明，则不会引发此错误。@praveenkumar:如果你在
render（）中定义了函数
然后它是一个闭包函数，但不是一个原型方法。请参阅：检查您的文件扩展名，应该是.tsx
class Counter extends React.component {
  renderNumbers() {
    return <Text>...</Text>
  }
  render() {
   /* Render code... */
  }
}