时间戳

首页 > 解决方案 > 将一个类导入反应

javascript - 将一个类导入反应

问题描述

我正在尝试将一个类导入到 react 项目的 return() 中。我尝试使用 reactDOM，但一直收到错误消息“找不到名称 ht 的查看配置”。我要导入的类称为“ht”。我把标签放在我的标题标签之间。这是 App.js：

import React from 'react';
import { StyleSheet, Text, View, TextInput, Button, ImageBackground, ScrollView } from 'react-native';
import ListItem from "/Users/Westin/assignment5/components/ListItem";
import ht from "/Users/Westin/assignment5/components/ht";




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}>
      ReactDOM.render(<ht />, document.getElementById('ht'));
      </View>
      </View>



      <View style={styles.input}>
      <TextInput 
      value={this.state.thing}
      placeholder="Add your favourite things" 
      style={styles.inputbox}
      onChangeText={this.thingValueChanged}
      />
      
      <Button
      title="Add"
      onPress = {this.onClickingAdd}
      />
        </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',
  },
  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,
  },
  addButton: {
    addButton: {
      width: "30%",

  }}});

这是我要导入的类。

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

class ht extends React.Component{
render() {
    return (
        <View>
            <Text style={styles.headerText}>My Favorite Things</Text>
            </View>
  );
}
}


const styles = StyleSheet.create({
    headerText: {
        fontSize: 35,
        color: 'white',
  }});


  export default ht;

标签： javascriptreactjs

解决方案

React 组件必须以大写字母开头，所以像这样导入你的类：

import Ht from "/Users/Westin/assignment5/components/ht";

为了保持一致，我还建议将原始名称中的名称更改为大写字母。

然后，将您的组件渲染为常规组件：

....
<View style={styles.header}>
<Ht />
</View>
....

推荐阅读