Question

我是React的新手，正在研究一个教程，以从Open Weather API中获取和呈现数据。我一直在UI上尝试使用Bootstrap，当我使用Bootstrap时，出现了HMR错误。当我不为表单，文本输入和提交按钮使用Bootstrap时，不会发生这种情况。我进行了大量研究，并了解到它与HotModuleReplacement和Webpack有关，但我对所读内容或如何应用任何提供的解决方案（如更改Webpack-config）了解不多。我遗漏了已确认可以使用Form的App.js和Weather.js。

表格（带有Bootstrap）-HMR错误
Form2（无Bootsrap）-正常工作
索引-使用bootstrap.css

表格（不起作用）

import React from 'react'

export default function Form (props) {
return(
    <form onSubmit={props.getWeather}>
        <div className="form-group">
            <label htmlFor="location">City, Country</label>
                <input 
                type="text" 
                className="form-control form-control-sm" 
                id="location" 
                placeholder="Enter City, Country"
                />
        </div>
        <div className="form-group">
            <label htmlFor="country">Country</label>
            <input 
            type="text" 
            className="form-control form-control-sm" 
            placeholder="Enter Country"/>
        </div>
        <button 
            type="submit" 
            className="btn btn-primary btn-sm">
            Submit
        </button>
    </form>
)
}

Form2-工作

import React from 'react'

const Form2 = (props) => {
return (
    <form onSubmit={props.getWeather}>
        <input
        type='text'
        placeholder='city'
        name='city'
        />
        <input
        type='text'
        placeholder='country'
        name='country'
        />
        <button>Submit</button>
    </form>
)
}

export default Form2;

Index.js-导入bootstrap.css

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://somelink
serviceWorker.unregister();

React Bootstrap-[HMR]等待来自WDS错误的更新信号

0 个答案: