在React中添加星级

Question

我有这个React组件，它列出了来自服务器URL的视频：

import React, { Component } from "react";
import axios from "axios";
import Figure from "react-bootstrap/Figure";
import Pagination from "@material-ui/lab/Pagination";
import { NavigationBar } from "./NavigationBar";


class VideoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      videos: [],
      totalVideoCount: 0,
    };

    this.handlePageChange = this.handlePageChange.bind(this);
  }

  //fetch all Videos
  getVideos(offset) {
    axios
      .get("/v1/videos" + offset) //offset for each page
      .then((response) => {
        this.setState({ totalVideoCount: response.data.total });
        var vid = [];
        //loop to give each video the value
        for (var i = 0; i < response.data.items.length; i++) {
          vid[i] = {
            key: i,
            title: response.data.items[i].title,
            uri: response.data.items[i].uri[0].uri.replace(
              "localhost:80",
              "URL"
            ),
            thumbnail: response.data.items[i].previews.items[0].uri.replace(
              "localhost:80",
              "URL"
            ), 
          };
        }
        this.setState({ videos: vid });
      })
      .catch((error) => {
        console.log("Problem with Get request", error);
      });
  }

  //retrive all videos on startup
  componentDidMount() {
    this.getVideos("");
  }

  handlePageChange = (event, value) => {
    this.getVideos("?offset=" + (value - 1) * 20); //offset the video requests
  };

  render() {
    return (
      <div>
        <NavigationBar />
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          <h1>Videolist</h1>
        </div>
        <ul style={{ listStyleType: "none" }}>
          {this.state.videos.map((video) => (
            <li
              style={{
                margin: "50px",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
              key={video["key"]}
            >
              <a href={video["uri"]}>
                <Figure>
                  <Figure.Image
                    width={400}
                    height={200}
                    alt="Thumbnail missing"
                    src={video["thumbnail"]}
                  />
                  <Figure.Caption>{video["title"]}</Figure.Caption>
                </Figure>
              </a>
            </li>
          ))}
        </ul>
        <div
          style={{
            margin: "50px",
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
          }}
        >
          {/* Number of pages depends on number of Videos, 20 per page */}
          <Pagination
            count={Math.ceil(this.state.totalVideoCount / 20)}
            onChange={this.handlePageChange}
          />
        </div>
      </div>
    );
  }
}

export default VideoList;

在app.js中呈现并且可以正常工作。我想在每个视频下添加星级评分系统的一个组件，我发现这个npm组件很简单：

import React from 'react';
import ReactDOM from 'react-dom';
import StarRatingComponent from 'react-star-rating-component';


class rating extends React.Component {
    constructor() {
        super();

        this.state = {
            rating: 1
        };
    }

    onStarClick(nextValue, prevValue, name) {
        this.setState({rating: nextValue});
    }

    render() {
        const { rating } = this.state;

        return (
            <div>
                <h2>Rating from state: {rating}</h2>
                <StarRatingComponent
                    name="rate1"
                    starCount={10}
                    value={rating}
                    onStarClick={this.onStarClick.bind(this)}
                />
            </div>
        );
    }
}

export rating.js; 

如何渲染此组件以显示在VideoList组件提取的每个视频下面？

Answer 1

将您的地图更改为这样：

{this.state.videos.map((video) => (
            <li
              style={{
                margin: "50px",
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
              }}
              key={video["key"]}
            >
              <a href={video["uri"]}>
                <Figure>
                  <Figure.Image
                    width={400}
                    height={200}
                    alt="Thumbnail missing"
                    src={video["thumbnail"]}
                  />
                  <Figure.Caption>{video["title"]}</Figure.Caption>
                </Figure>
              </a>
             <Rating /> 
            </li>
   ))}

我刚刚添加了这个<Rating />，将其从Rating转换为rating，然后像这样传入您需要的所有道具：<Rating {...props} />