Question

我正在尝试将我的React项目分成多个部分。我首先将ListItem.js拆分出来，但没有问题。尝试拆分Button.js和Input.js时出现错误。 Button.js给我一个重复声明的错误。 Input.js运行该应用程序时没有错误，但从应用程序中消失了。

这是主页App.js：

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, ImageBackground, ScrollView } from 'react-native';
import ListItem from "/Users/Westin/assignment5/ListItem";
import Input from "/Users/Westin/assignment5/Input";
import Button from "/Users/Westin/assignment5/Button";


export default class App extends React.Component {
  state ={
    thing: "",
    things: [],
  };

  thingValueChanged = value =>{
    //alert(value);
    this.setState({
      thing: value
    });
  }

  onClickingAdd = () =>
  {
    if(this.state.thing === "")
    {
      return;
    }

    this.setState(prevState => {
        return {
          things: prevState.things.concat(prevState.thing)
        };

    });
  }



  render() {
    const thingsOut = this.state.things.map((thing,i) => (<ListItem key = {i} thing={thing} />))
    
    
    return (
      <View style={styles.background}>
      <ImageBackground source={require("/Users/Westin/assignment5/background.jpg")} style={{width: '100%', height: '100%'}}>
      <View style={styles.container}>
      <View style={styles.header}>
       <Text style={styles.headerText}>My Favourite Things</Text>
      </View>
      </View>

      <View>
        {InputOut}
      

      
      <View>
        {ButtonOut}
        </View>
        </View>    
      
    
      <ScrollView>
        {thingsOut}
        </ScrollView>
      </ImageBackground>
      </View>
    );
}
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
    opacity: 0.7,
    alignItems: 'center',
    justifyContent: 'flexstart',
    paddingTop: 30,
    color: 'white'
  },
  background: {
    flex:1,
    alignItems: 'center',
    
  },
  header: {
    padding: 10,
    
  },
  headerText: {
    fontSize: 35,
    color: 'white',
  }
});

这是我运行良好的ListItem.js页面：

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, ImageBackground} from 'react-native';

const ListItem =(props) =>
(

    <View style={styles.listItem}>
        <Text style={styles.listtext}>
            {props.thing}
            </Text>
        </View>


);

const styles = StyleSheet.create({
    listItem: {
        width: "100%",
        padding: 10, 
        alignItems: 'center',
        backgroundColor: 'black',
        opacity: '0.7',
    },
    listtext: {
        color: 'white',
    }

  });


  export default ListItem;

这是作为重复声明错误运行的Button.js页面：

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, ImageBackground} from 'react-native';

const Button =(props) =>
(

    <View style={styles.addButton}>
   <Button
      title="Add"
      onPress = {Props.this.onClickingAdd}
      />
        </View>


);

const styles = StyleSheet.create({
        addButton: {
        width: "30%",
        }
  });


  export default Button;

这是从应用程序中消失的Input.js页面：

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, ImageBackground} from 'react-native';

const Input =(props) =>
(

    <View style={styles.input}>
      <TextInput 
      value={Props.this.state.thing}
      placeholder="Add your favourite things" 
      style={styles.inputbox}
      onChangeText={Props.this.thingValueChanged}
      />
      </View>


);

const styles = StyleSheet.create({
input: {
  flexDirection: "row",
  width: '100%',
  justifyContent: "space-evenly",
  alignItems: "center",
  backgroundColor: "black",
  opacity: '0.7',
},
inputbox: {
  borderWidth: 2,
  height: 40,
  width: "70%",
  backgroundColor: 'white',
  padding: 10,
}});


  export default Input;

Answer 1

在App.js中，您没有使用Input组件，而是在提供的代码中没有使用InputOut组件。另外，您在文本字段中提供了{Props.this.state.thing} value。该字段应为Props.thing。
重复声明错误

在以下代码中声明Button组件网之前，您已使用Button：

import'react-native'中的{StyleSheet，Text，View，TextInput，>>>> Button <<<<，ImageBackground};

只需将Button的名称更改为两个地方之一，即可正常使用。

试图在React，Javascript中将我的代码拆分成多个页面。收到多个错误

1 个答案: