Javascript 反应滑块组件

我正试图弄清楚如何实现一个组件，比如，但在启动时遇到了一些挑战

我在

应用程序

组件中尝试和摆弄。我走了这么远：

import React, { Component } from 'react';
import './App.css';

import Slider from 'react-rangeslider';

class App extends Component {

  constructor() {
    super();
    this.state = {
      speed: 4
    };
  }

  componentDidMount() {
    this.setState({
      speed: 3
    });
  }

  render() {
    return (
      <div className="App">
        <h2>{this.state.speed}</h2>
        <p>The page did render..</p>

        <Slider
          min={1}
          max={4}
          step={1}
          value={this.state.speed}
          onChange={(newVal) => {
            console.log('Sliding..');
            this.setState({
              speed: newVal
            });
            }
          }
        />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“react Range Slider”导入滑块；
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
速度：4
};
}
componentDidMount（）{
这是我的国家({
速度：3
});
}
render（）{
返回(
{this.state.speed}
这一页确实呈现了

{
console.log（'滑动..'）；
这是我的国家({
速度：纽瓦尔
});
}
}
/>
);
}
}
导出默认应用程序；

但是页面上没有出现滑块。。。只有标题和段落

更新 这是React检查的外观：

---

除了我的评论之外，请尝试将此css添加到您的页面：

.rangeslider{margin:20px 0;position:relative;background:#e6e6e6}.rangeslider .rangeslider__fill,.rangeslider .rangeslider__handle{position:absolute}.rangeslider,.rangeslider .rangeslider__fill{display:block;box-shadow:inset 0 1px 3px rgba(0,0,0,.3)}.rangeslider .rangeslider__handle{background:#fff;border:1px solid #ccc;cursor:pointer;display:inline-block;position:absolute}.rangeslider .rangeslider__handle:active{background:#999}.rangeslider-horizontal{height:20px;border-radius:10px}.rangeslider-horizontal .rangeslider__fill{height:100%;background:#27ae60;border-radius:10px;top:0}.rangeslider-horizontal .rangeslider__handle{width:40px;height:40px;border-radius:40px;top:-10px}.rangeslider-vertical{margin:20px auto;height:150px;max-width:10px;background:none}.rangeslider-vertical .rangeslider__fill{width:100%;background:#27ae60;box-shadow:none;bottom:0}.rangeslider-vertical .rangeslider__handle{width:30px;height:10px;left:-10px}.rangeslider-vertical .rangeslider__handle:active{box-shadow:none}@media screen and (min-width:1200px){#mount{width:600px}}

我已经从演示页面复制了这些样式，所以它们都被最小化了

---

github repo上的示例目录中有一个完整的文件。

尝试在render中记录

conhsole.log（Slider）

。Slider是否呈现任何html？Try inspect元素对包含的divI更新了一点代码。。日志中没有任何内容正常检查没有任何内容，因为它都在js包中。。但是使用铬合金的React检查，我确实找到了滑块。。要更新问题以显示滑块是否可能需要一些css规则？这是实现它的正常方法还是有更简单的方法？我认为在react应用程序中没有处理样式的正常方法。有些人使用诸如radium之类的插件来保持一切正常。其他人使用css预处理器，并且可以选择在网页包中使用css加载程序，其中包括html中的css。对于此组件，您可以在自己的less文件中使用@import从节点模块目录导入less文件。这是如果你使用更少。如果不是的话，你就得自己处理css了。。。