我正在尝试为我的本机分配创建一个按钮,但我不断收到意外的令牌,语法错误

问题描述 投票:-2回答:2

我是react-native的新手,而Im试图为我的react native分配创建一个按钮,但我不断收到意想不到的标记,语法错误。这是下面的代码(他们说错误在6-11行中)

我正在使用https://snack.expo.io/测试我的代码

这里是关于以下错误的确切说法:

''' /module:/App.js:意外令牌(8:18)

6- const Todo =道具=>(

7-视图>

8-title =“删除” />

9-{props.todo.text}

10-/查看>

11-)

评估模块://App.js.js

正在加载模块://App.js'''

由于某种原因,堆栈上的溢出未显示(视图,按钮,文本,ScrollView),但是它们在那里,但是您可以根据需要将它们重新添加以使代码正常工作。

我看过代码,但似乎无法找回我想要的东西,我将在此下面添加整个代码,以便您可以看到正在使用的所有代码。

感谢您的帮助!

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

let id = 0

const Todo = props => (
<View>
  <Button><onPress={props.onDelete}> title="delete" />
  <Text>{props.todo.text}</Text>
</View>
)

export default class App extends React.Component {
  constructor(){
    super()
    this.state = {
      todos: [],
    }
  }
}

addTodo() {
  id++
  const text = 'TODO number ${id}'
  this.setState({
    todos: [
      ...this.state.todos,
{id: id, text: text, checked: false},
    ],
  })
}

removeTodo(id) {
  this.setState({
    todo: this.state.todo.filter(todo => todo.id !
    )
  })
}

toggleTodo(id) {
  this.setState({
    todos: this.site.todo.map(todo => {
if (todo.id !== id) return todo 
return {
  id: todo.id
  text: todo.text
  checked: !todo.checked
      }
    })
  })
}

render() {
  return(
    <View>
      <Text>Todo count: this.state.todo.length}
        </Text>
        <Text>Unchecked todo count: this.state.todos.filter(todo => !todo.checked).length}    </Text>
        <Button onPress={() => this.addToDo()} title ="Add TODO" />
        <ScrollView>
        {this.state.todo.map(todo => (
          <Todo
          onToggle={() => this.toggleTodo(todo.id)}
          onDelete={() => this.removeTodo(todo.id)}
          todo={todo}
          />
        ))}
        </ScrollView>
      </View>
  )
 }
}
react-native
2个回答
0
投票

您应该先导入它

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

import Button from 'react-native';

0
投票

请按以下方式更改Todo功能

 const Todo = props => (
    <View>
     <Button onPress={props.onDelete} title="delete" />
     <Text>{props.todo.text}</Text>
    </View>
 )

但是即使这样,您的代码也无法编译。您的代码中有很多编译问题。请检查并重试。

© www.soinside.com 2019 - 2024. All rights reserved.