属性只能在对象上定义答案

【问题标题】：Properties can only be defined on Objects属性只能在对象上定义
【发布时间】：2020-01-15 20:13:19
【问题描述】：

我是 react native 的新手，并试图从组件文件夹中导入登录组件，但它显示错误 Click here to see screenshot

我用下面的代码试过了，我做错了什么

App.js

import React, { Component } from 'react'; 
import { Text, TextInput, View, Button, AppRegistry } from 'react-native';
import Login from './components/Login';

const styles = StyleSheet.create({
    container: {
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
    }
});

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
            <Login />
        </View>
        );
    }
}

登录.js

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

export default class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
      return (
          <View style={styles.container}>
              <View style={{padding: 10, justifyContent:'center'}}>
                  <TextInput
                      style={{height: 40,borderBottomWidth:2,marginBottom:20}}
                      placeholder="Enter Mobile No."
                      onChangeText={(text) => this.setState({text})}
                  value=""
                  />
                  <Button title="Sign in" style={{backgroundColor:'#3b5da8'}} />
              </View>
          </View>
      );
  }

【问题讨论】：

嗨 Lokesh，检查我的解决方案，如果有帮助，请告诉我。
可能与错误无关，但您在 Login.js 中缺少 TextInput 和 Button 的导入

标签： reactjs react-native import components expo

【解决方案1】：

我认为你有 2 个问题在这里。

首先，Login 组件中没有导入您的扩展，

class Login extends Component

在这里，您正在扩展 Component，但不是从 react 包中导入的。

你可以这样做，

class Login extends React.Component

或者你可以导入Component，

import React, {Component} from 'react'

其次，不能直接使用App组件中定义的styles，在Login组件内部。

<View style={styles.container}>

您需要将styles 作为道具传递给Login 组件，

<Login styles={styles.container}/>

现在你可以使用 props 在Login 组件中使用styles，

<View style={this.props.styles}>

注意：不要假设，如果您在父组件中导入了某些内容，也会应用到子组件。对于子组件，您需要单独导入。

例如Login组件中需要单独导入TextInput & Button。

您也不需要在App 组件中导入Text, TextInput, Button, AppRegistry，因为您没有使用它们。但是你需要导入StyleSheet。

只要明白，你只需要导入你在组件中使用的任何东西。

【讨论】：

【解决方案2】：

代码存在许多问题。确保导入您正在使用的所有组件。 “Component”模块应始终从 React

导入

您的 App.js 文件应如下所示：

import React, { Component } from 'react'; 
import { Text, TextInput, View, Button, AppRegistry, StyleSheet } from 'react-native';
import Login from './components/Login';

const styles = StyleSheet.create({
    container: {
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
    }
});

export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
            <Login />
        </View>
        );
    }
}

您的 Login.js 文件应如下所示：

import React, { Component } from 'react';
import { Text, View, StyleSheet, Image, TextInput, Button } from 'react-native';


const styles = StyleSheet.create({
    container: {
        display:'flex',
        justifyContent:'center',
        alignItems:'center',
    }
});

export default class Login extends Component {

  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
      return (
          <View style={styles.container}>
              <View style={{padding: 10, justifyContent:'center'}}>
                  <TextInput
                      style={{height: 40,borderBottomWidth:2,marginBottom:20}}
                      placeholder="Enter Mobile No."
                      onChangeText={(text) => this.setState({text})}
                  value=""
                  />
                  <Button title="Sign in" style={{backgroundColor:'#3b5da8'}} />
              </View>
          </View>
      );
  }

}

【讨论】：