reactjs React -意外的标记,应为;

u0sqgete  于 2023-01-04  发布在  React
关注(0)|答案(4)|浏览(174)

抛出的错误是:意外的标记,应为;(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
  }
});

谢谢你的帮助。

chhkpiq4

chhkpiq41#

你不应该使用function renderNumbers()吗?看起来renderNumbers不是Counter类的一个方法,而是你代码中的一个单独的函数。
顺便说一句,renderNumbers被定义了两次,尽管它是合法的,而不是问题的原因。
编辑:
如果你想把renderNumbers()声明为类Counter的一个原型方法,那么在类内部定义它:

export default class Counter extends React.Component {

    renderNumbers() {
       ...
    }

    ...

}

否则,使用关键字function定义一个函数

function renderNumbers() {
    ...
}

这只是ES6的语法。

zvms9eto

zvms9eto2#

您的组件遇到此错误的原因如下:1.如果在ES6类之外定义函数,则必须使用function关键字。但是,如果这样做,则在调用该函数时将未定义this引用。2.如果在React组件(它只是一个ES6类)内部定义函数,则在函数定义前面不需要"function"关键字。
备选办法1:

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

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

备选方案二:

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

您之所以会遇到您描述的错误,是因为Javascript编译器认为您是在"调用"而不是"定义" renderNumbers()。因此...它到达)并期望一个换行符或;,但它看到了{并抛出错误。
如果使用选项2调用renderNumbers(),请不要忘记使用this关键字

dz6r00yl

dz6r00yl3#

如果在一个基于函数的组件中,你声明函数(在返回之前),最好使用function关键字(这样它就不会抛出;必需错误)

osh3o9ms

osh3o9ms4#

如果您遇到类似以下情况:

import partys from "../data/TimeLines2000.json";

const Timeline = () => {
  return (
    <div>     <-- you will get the error if you're missing a wrapper element
    {partys.map(party =>
          <>
          <div className='partyContainer'>

相关问题