时间戳

首页 > 解决方案 > 无法正确导入或获取特定容器 React Js

javascript - 无法正确导入或获取特定容器 React Js

问题描述

我一直在尝试在一个文件中创建组件类并默认将它们导出到另一个文件中，在那里它们被导入并显示在另一个组件类中（所有这些都是为了保持我的代码干净）

但我无法让代码显示在我建立的网页上。

这是我的 App.js 中的代码

import React, { Component } from 'react';
import './App.css';
import user_Preference_Nav from './topUserPreferences.js';  // import from the external file

    class FavouritesOptionsModule extends Component {
      render() {
      return (
        <div>
           <user_Preference_Nav />
        </div>
  
  
     )
  }
}


class FavouriteSection extends Component {
  render() {
    return (
      <div style={{flex: '0 1 48.5%'}}>
        <h2>{this.props.heading}</h2>
        <div style={{...StyleFrame}}>
          <FavouritesOptionsModule/> //the outer container for the imported classes gets instantiated here.. this all gets shown correctly, its just the content within this instantiated class that isint properly shown.
          <div style={{...StyleItemList}}>
             <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
            <FavouriteItem/>
          </div>
        </div>
      </div>
    )
  }
} // and there is another class that gets instantiated as an outer component to this one, but i feel like that info is redundant as all outer containers display correctly its just the "<user_Preference_Nav />" from the "topUserPreferences.js" file that isint properlt shown...

这是外部文件“topUserPreferences.js”中的组件类

import React, { Component } from 'react';
import './App.css';
import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormControl from "@material-ui/core/FormControl";

import Button from "@material-ui/core/Button";

import Typography from "@material-ui/core/Typography";
import Slider from "@material-ui/core/Slider";


class user_Preference_Nav extends Component{

  render(){

    return(

  <div id="user-pref-main">

    <user_Preference_Slider />
    <user_Preference_Button />
    <user_Preference_Timeform />

  </div>

     )
   }
}

export default user_Preference_Nav //the default export


class user_Preference_Slider extends Component{



    render(){

        function valuetext(value) {
        return `${value}objects`;
      }

return(
  <div className="slider">
      <Typography id="discrete-slider" gutterBottom>
        Limit
      </Typography>
      <Slider
        defaultValue={30}
        getAriaValueText={valuetext}
        aria-labelledby="discrete-slider"
        valueLabelDisplay="auto"
        step={1}
        marks
        min={1}
        max={50}
    />
  </div>

)
}
}


class user_Preference_Button extends Component {

render() {

return(
  <div className="send_Container">
    <Button className="go_Button" variant="outlined">
      Go!
    </Button>
  </div>

    )
   }
}


class user_Preference_Timeform extends Component {

render() {



    return(

  <div className="timeForm">
    <FormControl component="fieldset">
      {/* <FormLabel component="legend">labelPlacement</FormLabel> */}
      <RadioGroup
        row
        aria-label="position"
        name="position"
        defaultValue="top"
      >
        <FormControlLabel
          value="top"
          control={<Radio color="primary" />}
          label="Long"
          labelPlacement="top"
        />
        <FormControlLabel
          value="start"
          control={<Radio color="primary" />}
          label="Medium"
          labelPlacement="top"
        />
        <FormControlLabel
          value="bottom"
          control={<Radio color="primary" />}
          label="Short"
          labelPlacement="top"
        />
      </RadioGroup>
    </FormControl>
  </div>


    )
}

}

我希望这些容器显示在页面上，但所发生的只是实际标签本身“<user_Preference_Nav />”显示为好像它是文本而不是其中的实际代码......

请耐心等待，因为我是一个需要做出反应的新手，这绝对是一个新手问题知道.. ;）

标签： javascriptreactjsreact-native

解决方案

用户定义的组件——与标准的 HTML 组件相反——需要以大写字母开头。React 就是这样知道你是想使用自己的组件还是使用标准的 HTML 标签。

您的组件user_Preference_Nav以小写字母开头，因此 React 会将其呈现为 HTML 字符串<user_Preference_Nav />，这显然不是您想要的。

将组件重命名为

class User_Preference_Nav extends Component {
  //  ^
  // ...
}

它应该按预期工作。

推荐阅读