React Select示例不显示下拉列表

提问者：小点点

React Select示例不显示下拉列表

我正在使用以下代码尝试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 i反应选择

还安装了引导程序

npm安装引导程序--保存

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

无法解析“components/university/App.js”中的“../../../../node_modules/bootstrap/dist/css/bootstrap.min.css”无法生成JavaScript包。

我可以看到引导程序。node_modules文件夹下的min.css。

如果我对导入进行注释，会得到以下结果：未找到名称div的视图配置。请确保以大写字母开头组件名称。

谁能告诉我哪里出了问题？提前感谢。

共2个答案

匿名用户

您不能在react native中使用html组件或常用的web css。与react web不同，react native会将您的组件映射到本机android、ios或windows ui组件。因此，您的组件必须由react本地组件组成。我想你应该看看这个答案，它更深入地解释了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供参考。

老答案，在我们了解到这是反应原生之前：

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

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

添加的大括号和返回完全不需要...

我还建议使用import'引导/dist/css/bootstrap。min.css'而不是import'../..//节点\ U模块/引导/dist/css/bootstrap。min.css'。CreateReact应用程序的Babel网页包设置将负责确定引导模块的位置。如果改为使用相对路径，则在使用导入移动文件时会出现错误。。。

也许在您的软件包安装过程中出错了？我建议你试试这个：

rm -rf ./node_modules
npm install
npm run start

您可以验证您的代码在这个沙盒中工作：https://codesandbox.io/s/react-select-bootstrap-sample-g2264?file=/src/App.js

匿名用户

你的进口看起来不错。有时错误消息会使我们偏离正轨，因为真正的错误是由其他编译问题引起的。因此，请首先尝试修复此问题：

你混淆了括号和大括号。另外，您缺少一个返回值。应该是：

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>
    );    
 };