css - 带有圆 Angular 的 React 渐变 slider (评级组件)

Question

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

这是我用白色和不透明度(如 0.2)覆盖渐变 div 所做的。颜色无关紧要。

你能帮我像第一张图片一样在 slider 内制作一个圆 Angular 边框吗？

添加缺失的代码。 我修改了 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>

zh/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 组件呈现两个 div。第一个是进度条，而内部 div 是当前进度，由作为 props 传递的值给出。
对于边框，由于我们有父/子层次结构，我们可以使用 inherit CSS 值。