React Select 示例不显示下拉列表

Question

我正在尝试使用以下代码的 React Select 下拉示例：

import React from 'react';
import Select from 'react-select';
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'; 

const techCompanies = [
{ label: "Apple", value: 1 },
{ label: "Facebook", value: 2 },
{ label: "Netflix", value: 3 },
{ label: "Tesla", value: 4 },
{ label: "Amazon", value: 5 },
{ label: "Alphabet", value: 6 },
]
const App = () => {
return (
  <div className="container">
      <div className="row">
          <div className="col-md-4" />
          <div className="col-md-4">
              <Select options={ techCompanies } />
          </div>
          <div className="col-md-4" />
      </div>
  </div>
 )    
 };

 export default App

在此之前，我安装了react select

npm 我反应-select

也安装了bootstrap

npm 安装bootstrap --保存

但是在运行之后我得到了错误：

无法从“components/university/App.js”解析“../../../node_modules/bootstrap/dist/css/bootstrap.min.css” 构建 JavaScript 捆绑包失败。

我可以在 node_modules 文件夹下看到 bootstrap.min.css。

如果我评论导入，我会得到以下信息：查看未找到名称 div 的配置。确保组件名称以大写字母开头。

谁能告诉我哪里出错了？提前致谢。

Answer 1

您的导入看起来没问题。有时错误消息会让我们偏离正轨，因为真正的错误是由其他一些编译问题引起的。所以，先尝试解决这个问题：

您混淆了括号和大括号。另外，您还缺少 return。应该是：

const App = () => {
    return (
        <div className="container">
            <div className="row">
                <div className="col-md-4" />
                <div className="col-md-4">
                    <Select options={ techCompanies } />
                </div>
                <div className="col-md-4" />
            </div>
        </div>
    );    
 };

Answer 2

您不能在 react-native 中使用 html 组件或通常的 web css。与 React web 不同，react-native 会将您的组件映射到原生 android、ios 或 windows ui 组件。因此，您的组件必须由 react-native 组件组合而成。我认为您应该查看这个，它更深入地解释了 react 和 react-native 之间的区别。

在您的情况下，您可以从类似于此的 App 组件开始：

import React, { useState } from "react";
import { View, Picker, StyleSheet } from "react-native";

const techCompanies = [
{ label: "Apple", value: 1 },
{ label: "Facebook", value: 2 },
{ label: "Netflix", value: 3 },
{ label: "Tesla", value: 4 },
{ label: "Amazon", value: 5 },
{ label: "Alphabet", value: 6 },
]

const App = () => {
  const [selectedValue, setSelectedValue] = useState(1);
  return (
    <View style={styles.container}>
      <Picker
        selectedValue={selectedValue}
        style={{ height: 50, width: 150 }}
        onValueChange={itemValue => setSelectedValue(itemValue)}
      >
        {techCompanies.map(({ label, value }) =>
           <Picker.Item label={label} value={value} key={value} />)}
      </Picker>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 40,
    alignItems: "center"
  }
});

export default App;

参考https://reactnative.dev/docs/picker。

旧答案，在我们了解到这是关于 react-native 之前：

您的原始代码实际上看起来不错，应该可以工作。

但是 css 导入通常应该是您的第一个导入，因为您希望导入组件中的样式优先于默认样式。 source

根本不需要添加的大括号和return...

我也推荐使用 import 'bootstrap/dist/css/bootstrap.min.css' 代替 import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'。 create-react-app 的 Babel+Webpack 设置将负责确定 bootstrap 模块的位置。如果您改用相对路径，一旦您使用导入移动文件就会出现错误...

也许您的软件包安装过程中出现了问题？我建议您试试这个：

rm -rf ./node_modules
npm install
npm run start

您可以验证您的代码是否在此沙箱中正常工作：https://codesandbox.io/s/react-select-bootstrap-sample-g2264?file=/src/App.js

React Select 示例不显示下拉列表

React Select Example not displaying dropdown

reactjs

react-bootstrap

react-select

react-native