反应选择示例不显示下拉菜单

Question

我只是在尝试使用以下代码的 React Select Dropdown 示例：

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 我反应选择

还安装了引导程序

npm install bootstrap --save

但运行后出现错误：

无法从“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 组件组合而成。我认为你应该看看这个answer，它更深入地解释了 react 和 react-native 之间的区别。

在您的情况下，您可以从类似于此的应用程序组件开始：

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 设置将负责确定引导模块的位置。如果你改用相对路径，当你用导入移动文件时就会出现错误...

您的软件包安装过程中可能出了什么问题？我建议你试试这个：

rm -rf ./node_modules
npm install
npm run start

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