引导选择元素未使用 react-router 呈现答案

【问题标题】：Bootstrap select element not rendered with react-router引导选择元素未使用 react-router 呈现
【发布时间】：2020-01-26 17:26:03
【问题描述】：

我正在用 reactjs 制作一个基本的应用程序。我已经为 3 个组件设置了路线。问题是渲染组件时不出现选择字段。我正在为选择字段使用引导选择库。

className 为“selectpicker”的选择字段不会呈现，它们只是不存在。当我从类名中删除“selectpicker”时，它们出现了。使用“selectpicker”时，它们会在重新加载浏览器页面时显示。

下面是我的代码中的一个 sn-p： https://codesandbox.io/s/determined-panini-2mmv3 所有三个组件几乎都相似。

import React from 'react'
import A from "./A"
import B from "./B"
import C from "./C"
import {BrowserRouter as Router, Switch, Link, Route} from "react-router-dom"

class App extends React.Component{
  constructor(){
    super()
  }
    render(){
      return(
        <div>
          <Router>
            <ul>
              <li><Link to="/">TO A</Link></li>
              <li><Link to="/page1">TO B</Link></li>
              <li><Link to="/page2">TO C</Link></li>
            </ul> 
            <Switch>
              <Route exact path='/' component={A}/>
              <Route path='/page1' component={B}/>   {/* components B and C have select field with selectpicker class*/}
              <Route path="/page2" component={C}/>
            </Switch>
          </Router>
        </div>
      )
    }
}

export default App

{/*Component A*/}

import React from "react"

class A extends React.component{
  constructor(){
    super()
    this.state={
      componentA: ""
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event){
    const {name, value, type, checked} = event.target
    type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
  }

  render(){
    return(
      <div className="form-group row">
        <label htmlFor="tempid" className="col-sm-2 col-form-label">Choose an option</label>
        <div className="col-sm-10">
            <select 
              className="form-control custom-select selectpicker"
              name = "componentA" 
              id = "tempid"
              value = {this.state.componentA}
              onChange = {this.handleChange} 
              required
            >
              <option value="" style={{display:"none"}} disabled selected>Choose one</option>
              <option value="p">P</option>
              <option value="q">Q</option>
              <option value="r">R</option>
              <option value="s">S</option> 
            </select>
        </div>
      </div>
    )
  }
}
export default A

以下是我的 index.html 文件，我已正确包含引导程序和引导程序选择。单独渲染组件时它工作正常。当我开始使用路由时，问题就出现了。

<!DOCTYPE html>
<html lang="en"><head>
  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#000000">
  <meta name="description" content="Web site created using create-react-app">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.min.css">


  <title>React App</title>

</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/js/bootstrap-select.min.js" type="text/javascript"></script>

</body></html>

这是我的问题代码框https://codesandbox.io/s/determined-panini-2mmv3的链接

实际输出：带有“selectpicker”类的选择输入字段根本不显示。只有标签和其他文本输入可见。当“selectpicker”类名被删除时，它按预期工作。我得到以下输出：

预期：要呈现的选择输入字段。预期应该如下：

【问题讨论】：

@Semi-Friends App 组件不是父组件本身吗？你能指导我找到一个来源或任何参考吗？
对我来说很好用：codesandbox.io/s/divine-cloud-vv3ob您是否正确包含了 Bootstrap？
@ChrisG 我已经包含了我的 html 文件，是的，我已经正确添加了引导程序
@ChrisG 完全相同的代码在代码沙箱 codesandbox.io/s/elegant-platform-5vpq2 中工作，但它不适用于 Visual Studio 代码，即使安装了所有正确的依赖项。请查看我添加到问题中的屏幕截图。
那个codeandbox缺少react-select的样式表，这正是导致原始问题的原因，因为它隐藏了<select>（理论上是为了用
替换它来实现自定义外观）。我让它与通过在组件的componentDidMount() 中手动调用$('select').selectpicker() 添加的样式表一起工作，但是使用 jQuery 拐杖并不是 React 的一个好的解决方案。甚至还有一个适用于 selectpicker 的 React 模块，但我收到一条奇怪的错误消息，提示 dist 文件无法打开。

标签： javascript jquery reactjs bootstrap-4 react-router

【解决方案1】：

按照问题中的一位 cmets 的建议，我尝试在我的 componentDidMount() 中添加 $('select').selectpicker()。但它没有按预期工作。相反，我遇到了一个错误__WEBPACK_IMPORTED_MODULE_8_jquery___default(…)(…).selectpicker is not a function。在字面上挣扎了几天之后，我能够使用来自React Error : __WEBPACK_IMPORTED_MODULE_4_jquery___default(...)(...).modal is not a function 的答案来解决这个问题。

导入 import $ from 'jquery' 在您的模块内创建一个名为 $ 的局部变量，然后由 $('.selectpicker').selectpicker() 使用（而不是您想要的全局 $）。

最快的解决方法是显式使用全局上下文中的 jQuery $（已使用您的 $.selectpicker() 扩展，因为您在脚本标记中引用了它。

window.$('.selectpicker').selectpicker()

【讨论】：

虽然这已经解决了您的问题，但应该注意的是，在 React 的上下文中，最好不要像一开始那样弄乱 jQuery，而是使用适当的 React 组件。 Bootstrap 提供了<Form.Control as="select">，还有一些其他的库。
@ChrisG 是的，我知道。虽然现在正在呈现选择字段，但我在表单中应用的验证不起作用，除非我重新加载页面。我已经尝试了许多图书馆。但我正在寻找一个选择库，它 (1) 允许我使用对象数组填充选项，(2) 提供“数据实时搜索”属性，以及 (3) 类似于“数据子文本”属性这让我可以在正文下的选项中包含其他信息。在我尝试过的所有库中，bootstrap-select 是最适合的。
太好了。 window.$('.selectpicker').selectpicker() 就像一个魅力。
感谢您的回答，两天后解决了我的问题！