时间戳

首页 > 解决方案 > 反应选择示例不显示下拉菜单

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

问题描述

我只是在尝试使用以下代码的 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

在此之前，我安装了反应选择

npm 我反应选择

还安装了引导程序

npm install bootstrap --save

但运行后我收到错误：

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

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

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

谁能告诉我哪里出错了？在此先感谢。

标签： reactjsreact-nativereact-bootstrapreact-select

解决方案

您不能在 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 导入通常应该是您的第一次导入，因为您希望导入组件中的样式优先于默认样式。来源

添加的大括号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

推荐阅读