我目前有一个评级系统,可以产生 5 颗星,可以显示一半的值。我通过使用 FontAwesome 的 Half Stars 做到了这一点,并做了一些 CSS 技巧使它们看起来像一颗星。但是我想通过想出一种方法来只显示 SVG 图标的一半来增加我的 React 和 CSS 知识。因此,我可以使用用户想要的任何图标,而不是使用半星,例如,如果您想给出 3.5 的评分,它只会显示图标的 50%。
问:你能不能只显示一个图标的一半,然后以某种方式知道用户是点击一侧还是另一侧?
这是我目前使用半星的代码作为参考
import React, { useState } from 'react'
import { FaRegStarHalf, FaStarHalf } from 'react-icons/fa'
import './styles/Rater.css'
const Rater = ({ iconCount }) => {
const [rating, setRating] = useState(null)
const [hover, setHover] = useState(null)
// check if user has set a rating by clicking a star and use rating to determine icons
const Star = rating ? FaStarHalf : …Run Code Online (Sandbox Code Playgroud) 在我正在使用的package.json中
"scripts": {
"start": "node app.js"
},
Run Code Online (Sandbox Code Playgroud)
但是如果我使用nodemon替换为node app.js
"scripts": {
"start": "nodemon app.js"
},
Run Code Online (Sandbox Code Playgroud)
那会发生什么呢?因为当我在服务器端遇到任何错误时,其他API也会关闭。因此,我认为发生这种情况是因为如果我使用nodemon app.js,那么我将使用node app.js,那么服务器是否会重启。
我已经有一个正在运行的 Angular 应用程序,因为有功能扩展,我必须实现该应用程序的路由和登录页面。以前没有路由,作为路由的一部分,我添加了以下代码。
app.modules.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { LoginComponent } from './login/login.component';
import {CommonModule} from "@angular/common";
import {FormsModule , ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent,
HomeComponent,
SignUpComponent,
LoginComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
ReactiveFormsModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class …Run Code Online (Sandbox Code Playgroud) 我想使用 Perl www::mechanize 连接到网络服务器并请求资源。例如http://www.my.domain/test.html。但我想独立于 URL 中的主机名指定 IP 地址。
例如:www.my.domain解析为 1.1.1.1,但我想连接到 2.2.2.2。
我想这样做是为了测试负载均衡器后面的多个 Web 服务器。
css ×2
javascript ×2
algorithm ×1
angular ×1
html ×1
node.js ×1
nodemon ×1
perl ×1
react-icons ×1
reactjs ×1
svg ×1
typescript ×1