Javascript 我想将这个平面列表反应本机代码转换为类文件 从“React”导入React； 进口{ 安全区域视图， 可触摸不透明度， 平面列表， 样式表， 文本， }从“反应本机”； 常数数据=[ { id:'1'， 标题：“第一项”， }, { id:'2'， 标题：“第二项”， }, { id:'3'， 标题:"第三项",， }, { id:'4'， 标题：“第四项”， }, { id:'5'， 标题:"第五项",， }, { id:'6'， 标题:"第六项",， }, { id:'7'， 标题:"第七项",， }, ]; 功能项（{id，title，selected，onSelect}）{ 返回( onSelect（id）} style={[styles.item，{backgroundColor:已选定？'#1EF09D'：'white'}]} > {title} ); } 导出默认函数App（）{ const[selected，setSelected]=React.useState（newmap（））； const onSelect=React.useCallback( id=>{ const newswelected=新建Map（）； //newSelected.set（id，！selected.get（id））； newSelected.set（id，！selected.get（id））； 当选（新当选）； }, //[选定]， ); 返回( ( )} keyExtractor={item=>item.id} 外部数据={selected} /> ); } const styles=StyleSheet.create({ 容器：{ 弹性：1， }, 项目：{ 背景颜色：“红色”， 填充：20， Margin:8， marginHorizontal:10， 宽度：“50%”， 身高：20%， 弹性：2， 边界宽度：2， 边界半径：15， 边框颜色：“#39FF33”， }, 标题：{ 尺寸：14， }, });

如何在类文件中转换此代码。此代码处于运行状态，您可以在snack.expo.io或您自己的pc上运行。当我尝试转换此代码时，我面临minirect问题以及更多问题

---

当我试图转换代码时，我也面临hooks错误。

这是转换为类的本机应用程序

import React from 'react';
import {
  SafeAreaView,
  TouchableOpacity,
  FlatList,
  StyleSheet,
  Text,
} from 'react-native';

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '4',
    title: 'Fourth Item',
  },
  {
    id: '5',
    title: 'Fifth Item',
  },
  {
    id: '6',
    title: 'Sixth Item',
  },
  {
    id: '7',
    title: 'Seventh Item',
  },
];


function Item({id, title, selected, onSelect}) {
  return (
    <TouchableOpacity
      onPress={() => onSelect(id)}
     style={[styles.item, {backgroundColor: selected ? '#1EF09D' : 'white'}]}
     >
      <Text style={styles.title}>{title}</Text>
    </TouchableOpacity>
  );
}

export default function App() {
  const [selected, setSelected] = React.useState(new Map());


  const onSelect = React.useCallback(
    id => {

      const newSelected = new Map();
     // newSelected.set(id, !selected.get(id));
      newSelected.set(id, !selected.get(id));
      setSelected(newSelected);

    },
   // [selected],
  );

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        horizontal
        initialScrollIndex={DATA.length - 1}
        data={DATA}
        renderItem={({item}) => (
          <Item
            id={item.id}
            title={item.title}
            selected={!!selected.get(item.id)} **im facing the issue at this point after converting this into a class file**
            onSelect={onSelect}
          />
        )}
        keyExtractor={item => item.id}
        extraData={selected}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: 'red',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 10,
    width: '50%',
    height: '20%',
    flex: 2,
    borderWidth: 2,
    borderRadius: 15,

    borderColor: '#39FF33',
  },
  title: {
    fontSize: 14,
  },
});

---

您想附加您尝试的代码吗？首先感谢您尝试帮助我。我想把这些函数转换成一个类。为此，我可以在文件中使用构造函数和状态。。我需要这些功能，这段代码是以类的形式执行的。谢谢上面的代码是我所有的练习工作。你能告诉我，我怎样才能使我的最后一个（第七个）项目成为默认选择的项目，这样每当我启动我的应用程序时，它都会自动选择。？？？pleaseee@account，我更新了答案。这样行吗？选中：新建映射（[[DATA.length-1，true]]），表示是否要自动选中最后一个框。不通过提供id号进行硬编码。我刚刚尝试了这个，但它不正确（我的代码）…@account，我更新了答案。关于你的评论。因为

DATA.length-1

是数字的类型，而id是字符串的类型（比如

'7'

）。

import React, { Component } from 'react';
import {
  SafeAreaView,
  TouchableOpacity,
  FlatList,
  StyleSheet,
  Text,
} from 'react-native';

const DATA = [
  {
    id: '1',
    title: 'First Item',
  },
  {
    id: '2',
    title: 'Second Item',
  },
  {
    id: '3',
    title: 'Third Item',
  },
  {
    id: '4',
    title: 'Fourth Item',
  },
  {
    id: '5',
    title: 'Fifth Item',
  },
  {
    id: '6',
    title: 'Sixth Item',
  },
  {
    id: '7',
    title: 'Seventh Item',
  },
];

class Item extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {id, title, selected, onSelect} = this.props;
    return (
      <TouchableOpacity
        onPress={() => onSelect(id)}
      style={[styles.item, {backgroundColor: selected ? '#1EF09D' : 'white'}]}
      >
        <Text style={styles.title}>{title}</Text>
      </TouchableOpacity>
    );
  }
}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: new Map(),
    };
  }

  onSelect = id => {
    const { selected } = this.state;
    var newSelected = new Map();
    newSelected.set(id, !selected.get(id));
    this.setState({selected: newSelected});
  };

  render() {
    const { selected } = this.state;
    return (
      <SafeAreaView style={styles.container}>
        <FlatList
          horizontal
          initialScrollIndex={DATA.length - 1}
          data={DATA}
          renderItem={({item}) => (
            <Item
              id={item.id}
              title={item.title}
              selected={!!selected.get(item.id)}
              onSelect={this.onSelect}
            />
          )}
          keyExtractor={item => item.id}
          extraData={selected}
        />
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: 'red',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 10,
    width: '50%',
    height: '20%',
    flex: 2,
    borderWidth: 2,
    borderRadius: 15,

    borderColor: '#39FF33',
  },
  title: {
    fontSize: 14,
  },
});

export default App;

constructor(props) {
    super(props);
    this.state = {
      selected: new Map([[DATA[DATA.length - 1].id, true]]), // last item selected
    };
  }