Question

我正在寻找创建一个React组件。我只是想知道是否有人有最好的方法来使功能正常工作，如以下屏幕截图所示：

我正在创建应用程序，但是我只是想知道是否有人看到过我可以使用的任何库来达到预期的效果？

Answer 1

如果您不愿意花一些时间自己开发它，可以使用一些npm的库，但是如果您希望这些星星与您的示例完全一样，则必须自己重新设置它们的样式。

react-star-ratings

或

react-rating（易于使用，但缺少组件演示）

或

material-ui-rating（如果您已经在使用Material-ui的库，并且希望保留所有具有美感的可视化内容，那就很好了）

但是，如果您不想依赖于其他代码，则可以按照@ Amir-Mousavi所说的做，有很多可行的示例。

Answer 2

您可以通过将项目分解为小组件来实现。例如，用于显示星星和未分配列表的组件。

<Item
   <Stars />
   <PriorityModal />
/>

演示

.container {
  display: flex;
  border-radius: 14px 14px 14px 14px;
  border: #a4a4a4 1px solid;
  overflow: hidden;
  padding-left: 10px;
  box-shadow: 0px 6px 9px 2px rgba(0, 0, 0, 0.75);
}

.description {
  flex: 2;
}

.status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  overflow: hidden;
}

.divider {
  border: grey 1px solid;
}

.stars {
  align-items: center;
  justify-content: center;
}

ul li {
  display: inline;
}

.status ul {
  list-style-type: none;
  padding: 0px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: top;
  /* display: flex; */
}

.priority ul {
  list-style-type: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  vertical-align: top;
}

.priority p {
  margin: 0;
  text-align: center;
}

p {
  margin: 0;
}

.priority .icons {
  font-size: 50px;
}

.status .icons {
  font-size: 40px;
}

.priority {
  position: absolute;
  top: 110px;
  right: 100px;
  border-radius: 5px;
  border: #a4a4a4 1px solid;
  padding: 5px;
}

.status-para {
  background-color: blue;
  color: white;
  width: 100%;
  padding: 3px;
  border-bottom-right-radius: 5px;
}

.settings {
  margin-left: 5px;
  margin-right: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="root"></div>

<script type="text/babel">

const styles = {
  rated: {
    color: "#FFCE2B"
  }
};

class Star extends React.Component {
  state = {
    stars: [],
    rated: -1
  };

  onMouseEnter = index => {
    this.colorOnHover(index);
  };

  onMouseLeave = () => {
    const stars = this.state.stars.map((item, i) =>
      i <= this.state.rated ? { rated: true } : { rated: false }
    );

    this.setState({
      stars
    });
  };

  colorOnHover = index => {
    const stars = this.state.stars.map((item, i) =>
      i <= index ? { rated: true } : { rated: false }
    );

    this.setState({
      stars
    });
  };

  componentDidMount = () => {
    const numberOfStars = this.props.stars;
    const stars = [];

    for (let i = 0; i < numberOfStars; i++) {
      stars.push({
        rated: false
      });
    }

    this.setState({
      stars
    });
  };

  componentDidUpdate = prevProps => {
    if (prevProps.rated !== this.props.rated) {
      this.colorOnHover(this.props.rated);
    }
  };

  render() {
    const starsArray = this.state.stars || [];
    const rated = this.props.rated;
    const stars = starsArray.map((item, index) => (
      <li key={index.toString()}>
        <i
          style={item.rated ? styles.rated : null}
          onClick={() => this.props.rate(index)}
          onMouseEnter={() => this.onMouseEnter(index)}
          class="fa fa-star icons"
        />
      </li>
    ));
    return (
      <div className="stars">
        <ul className="test" onMouseLeave={() => this.onMouseLeave()}>
          {stars}
        </ul>
      </div>
    );
  }
}

class RowItem extends React.Component {
  state = {
    showPriority: false,
    rated: -1
  };

  showPriority = () => {
    this.setState({
      showPriority: !this.state.showPriority
    });
  };

  rate = index => {
    this.setState({
      rated: index === this.state.rated ? index - 1 : index
    });
  };

  render() {
    return (
      <div>
        <div className="container">
          <div class="description">
            <p>Name</p>
            <p>Order coffee beans</p>
            <hr />
            <p>Process description</p>
          </div>
          <div className="divider" />
          <div className="status">
            <p>Workers assigned</p>
            <div>12/25</div>
            <Star rate={this.rate} rated={this.state.rated} stars="3" />
            <p className="status-para">
              <i
                onClick={this.showPriority}
                class="fa fa-cog settings"
                aria-hidden="true"
              />
              running
            </p>
          </div>
        </div>
        {this.state.showPriority && (
          <div className="priority">
            <p>Set priority</p>
            <Star rate={this.rate} rated={this.state.rated} stars="3" />
          </div>
        )}
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div>
        <RowItem />
      </div>
    );
  }
}


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

使用开始评级和下拉响应组件

2 个答案: