javascript - 当我在 index.js 上导入类时，“元素类型无效：需要一个字符串”

Question

我明白了

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。当我访问反应应用程序时无缘无故

   6 | import "bootstrap/dist/css/bootstrap.css";
   7 | import Counter from "./components/counter";
   8 | 
>  9 | ReactDOM.render(<Counter />, document.getElementById("root"));
  10 | 
  11 | // If you want your app to work offline and load faster, you can change
  12 | // unregister() to register() below. Note this comes with some pitfalls.

它在第 9 行提示，即使我导出和导入类就好了

标签： javascriptreactjsjsx

Answer 1

要使用导入，您必须像这样使用导出默认关键字，或者在必须使用的文件中导出多个对象

import { Counter } from "./component/counter";

我的示例如何使用导出默认关键字

import React from "react";
import PropTypes from "prop-types";

const ACCInput = props => {
  const className = "form-control";
  const classNameError = "form-control is-invalid";

  return (
    <div className="form-group">
      <label htmlFor={props.name} hidden>
        {props.name}
      </label>
      <div>
        <input
          className={props.className ? classNameError : className}
          id={props.id}
          type={props.type}
          name={props.name}
          placeholder={props.placeholder}
          onFocus={props.onFocus}
          onChange={props.onChange}
          onBlur={props.onBlur}
          value={props.value}
          disabled={props.disabled}
        />
      </div>
    </div>
  );
};

ACCInput.propTypes = {
  className: PropTypes.bool,
  id: PropTypes.string,
  type: PropTypes.string,
  name: PropTypes.string,
  placeholder: PropTypes.string,
  value: PropTypes.string,
  onChange: PropTypes.func,
  onBlur: PropTypes.func,
  onFocus: PropTypes.func,
  required: PropTypes.string,
  disabled: PropTypes.string
};

export default ACCInput;