我试图为我的反应本机分配创建一个按钮，但我不断收到一个意外的令牌，语法错误

Question

我是反应原生的新手，我试图为我的反应原生赋值创建一个按钮，但我不断收到一个意外的标记，语法错误。这是下面的代码(他们说错误在第 6 - 11 行(

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

以下是它对以下错误的确切说明：

'''/模块：/应用.js：意外令牌 (8：18(

6 - 常量待办事项 = 道具 => (

7 - 查看>

8 - 标题="删除"/>

9 - {props.todo.text}

10 -/查看>

11 - (

评估 module://App.js.js

装载 module://App.js '''

由于某种原因，堆栈溢出它没有显示(视图、按钮、文本、滚动视图(，但它们在那里，但您可以根据需要将它们添加回来以使代码正常工作。

我已经查看了代码，但我似乎无法得到我缺少的内容，我将在此下添加整个代码，以便您可以看到我正在使用的所有代码。

感谢您的帮助！

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>
)
}
}

Answer 1

请按如下方式更改待办事项功能

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

但即使在此之后，您的代码也无法编译。 您的代码中存在很多编译问题。 请检查并重试。

Answer 2

但是我已经在代码的顶部有了这些

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

除非这不是导入按钮的正确方法？所以我肯定错过了一些东西。

所以病了试试

import Button from 'react-native';

看看会发生什么

感谢您的帮助