Question

我已经开始使用我刚接触过的使用ReactJS的项目，并且我不了解React组件的结构，它看起来不像我在教程中找到的大多数示例。这几乎就是我现在从结构中得到的：

通过下载的javascript将响应加载到html文件中：

<script src="vendor/babel.min.js"></script>
<script src="vendor/react.production.min.js"></script>
<script src="vendor/react-dom.production.min.js"></script>
<script src="vendor/reactstrap.min.js"></script>

项目中的典型组件如下：

export default class ExamplePage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return <p>Example page</p>
  }
}

在我在教程中看到的大多数示例中，它们都始于：

import React from 'react';

为什么这里不需要？在项目中也根本没有找到来自npm的package.json文件，只是一个包含所有使用的库的供应商地图。

此外，我现在想使用reactstrap的Input组件，所以我从CDN下载了它：

https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js

并添加了类似于第一个代码段的引用，并将上面的render方法更改为：

render() {
    return (
      <div>
        <p>Buy orders</p>
          <Input type="email"
                 name="email"
                 className="border-right-0"
                 placeholder="Enter email"/>
      </div>
    )
  }

但是控制台运行后，我在控制台输出中得到“输入未定义”，显然找不到组件。

Answer 1

reactstrap从其UMD公开的全局变量为Reactstrap，因此您需要使用Reactstrap.Input组件。

示例

render() {
  return (
    <div>
      <p>Buy orders</p>
      <Reactstrap.Input
        type="email"
        name="email"
        className="border-right-0"
        placeholder="Enter email"
      />
    </div>
  );
}

通过CDN导入ReactJS

1 个答案: