Я делаю базовое приложение в ReactionJS.Я настроил маршруты для 3 компонентов.Проблема в том, что поля выбора не отображаются при визуализации компонента.
Поля выбора, которые имеют className как «selectpicker», не отображаются, их просто нет.Они появились, когда я удалил «selectpicker» из className.При использовании «selectpicker» они появляются при перезагрузке страницы браузера.
Ниже приведен фрагмент из моего кода: 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, и я правильно включил bootstrap и bootstrap-select.Работает нормально при рендеринге компонентов по отдельности.Проблема возникла, когда я начал с маршрутизации.
<!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>
Вот ссылка на коды моей проблемыandbox https://codesandbox.io/s/determined-panini-2mmv3
Фактический вывод: поля ввода select с классом «selectpicker» не отображаютсяна всех.Видны только метки и другие текстовые вводы.Когда имя класса «selectpicker» удаляется, оно работает как положено.В качестве вывода я получаю следующее: 
Ожидается: поле ввода выбора, которое будет отображаться.Ожидаемое должно быть следующим: 