反射具有圆角的渐变滑块（等级组件）

Question

我是CSS和React的新手。我的任务是制作如下图所示的组件。

这是我通过覆盖白色和不透明度（如0.2）的渐变div而制作的。颜色没关系。

你能帮我在第一张图片上像滑块一样制作圆形边框吗？

添加丢失的代码。我修改过Benjamin的Reid例子。

这是我的代码：

class MySlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rating: this.props.rating || null,
      tempRating: null
    };
  }

  rate = (rating) => {
    this.setState({
      rating,
      tempRating: rating
    });
  };

  starOver = (rating) => {
    this.setState({
      rating,
      tempRating: this.state.rating
    });
  };

  starOut = () => {
    this.setState({
      rating: this.state.tempRating
    });
  };

  render() {
    const elements = [];

    for (let i = 0; i < 5; i++) {
      let cssSelectorClass = 'my-slider__item';

      if (this.state.rating !== null && this.state.rating >= i) {
        cssSelectorClass += ' --selected';
      }

      elements.push(
        <div
          className={cssSelectorClass}
          onClick={this.rate.bind(this, i)}
          onMouseOver={this.starOver.bind(this, i)}
          onMouseOut={this.starOut} />
      );
    }

    return (
      <div>
        <div className="back" />
        <div className="my-slider">
          {elements}
        </div>
      </div>
    );
  }
}

class App extends React.Component {
    render() {
        return <MySlider value={2} />
    }
}

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

.my-slider {
  display: flex;
  position: relative;
  z-index: 1;
}
.my-slider__item {
    height: 30px;
    width: 30px;
    background-color: white;
    opacity: 0.8;
}

.my-slider__item:hover {
      cursor: pointer;
    }

.--selected {
      opacity: 0;
}

.back {
  opacity: 0.5;
  background-image: linear-gradient(to right, blue, red);
  position: absolute;
  z-index: 0;
  width: 150px;
  height: 30px;
  background-color: #00ccff;
  border-radius: 0 20px 20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

A / vNVwPW

Answer 1

没有代码，很难回答，特别是因为我们不知道你的组件是如何构建的。 无论如何，我只是“尝试和客人”：让我知道这是否有助于你：

class ProgressBar extends React.Component {
    constructor(props) {
        super(props);
    }
    
    render() {
        return (
            <div className="progressBar">
                <div
                    className="currentProgress"
                    style={{width: `calc(${this.props.value}%)`}}/>
            </div>            
        );
    }
}

class App extends React.Component {
    interval;
    
    constructor(props) {
        super(props);
        
        this.state = {value: 75};
    }
    
    componentDidMount() {
        this.interval = setInterval(() => {
            this.setState({ value: Math.floor(Math.random() * (75-65+ 1) + 65)});
        }, 500)
    }
    
    componentWillUnmount() {
        clearInterval(this.interval);
    }
    
    render() {
        return <ProgressBar value={this.state.value} />
    }
}

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

@import url(https://fonts.googleapis.com/css?family=Montserrat);

body {
    font-family: 'Montserrat', sans-serif;
}

.progressBar {
    width: 500px;
    height: 50px;
    background: #FDE9EC;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.currentProgress {
    height: inherit;
    background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id='root'></div>

正如你所看到的，它很简单：ProgressBar组件呈现两个divs。第一个是进度条，而内部div是当前进度，由props传递的值给出。 对于边框，由于我们有父/子层次结构，我们可以使用inherit CSS值。