javascript - 通过反应组件中的 HTML 样式属性将 javascript 变量传递给 css 变量

Question

解释我到底想要做什么有点困难，但通过查看代码应该很明显。

这是 react 组件的完整代码，请注意缺少填充 prop 的端点，因为它尚未开发。

import React, { useState } from 'react';
import { Modal, ModalHeader, ModalBody, Button, Row, Col, Container } from 'reactstrap'

import '../../scss/hitchpin/star-rating.scss'

const ReviewModal = (props: Props) => {
  const {
    offering,
    ratings,
    comments,
    response,
  } = props

  const [modal, setModal] = useState(false);

  const [sellerReviews, setSellerReviews] = useState(false);

  const toggle = () => {
    setModal(!modal);

    if (document.getElementById('seller').onclick) {
      setSellerReviews(!sellerReviews);
    }
  }

  return (
    <div>
      <Button id="seller" className="btn-sm ml-2 btn btn-secondary" onClick={toggle}> Seller Review Details </Button>
      <Button className="btn-sm ml-2 btn btn-secondary" onClick={toggle}> Buyer Review Details </Button>
      <Modal isOpen={modal} toggle={toggle}>
        <ModalHeader toggle={toggle}>Review Details</ModalHeader>
        <ModalBody>
          <div>
            <Container>
              <Row>
                <Col>As a Seller</Col>
              </Row>
            </Container>
          </div>
          <div className="p-3">
            <h3>{offering.title}</h3>
            <p>Category: {offering.category}</p>

            <Container>
              <Row>
                <Col xs="6">Overall</Col>
                <Col xs="6" class="Stars" style={'--ratings:' ratings.overall}></Col>
              </Row>
              <Row>
                <Col xs="6">Response Time</Col>
                <Col xs="6" class="Stars" style={--ratings: ratings.response}></Col>
              </Row>
              <Row>
                <Col xs="6">Friendliness</Col>
                <Col xs="6" class="Stars" style={--ratings: ratings.friendliness}></Col>
              </Row>
              <Row>
                <Col xs="6">Punctuality</Col>
                <Col xs="6" class="Stars" style={--ratings: ratings.punctuality}></Col>
              </Row>
              {sellerReviews && (
                <Row>
                  <Col xs="6">Quality of Product/Service</Col>
                  <Col xs="6" class="Stars" style={--ratings: ratings.quality}></Col>
                </Row>
              )}
            </Container>
            <div>
              <p>{!sellerReviews ? "Buyer's Comments:" : "Seller's Comments"}</p>
              <textarea readOnly>
                {comments.message && (
                  {comments.message}
                )}
              </textarea>
            </div>
            <div>
              <p>{sellerReviews ? "Buyer's Response:" : "Seller's Response"}</p>
              <textarea readOnly>
                response.message && (
                  {response.message}
                )}
              </textarea>
            </div>
          </div>
        </ModalBody>
      </Modal>
    </div>
  );
}

export default ReviewModal

我遇到的问题是，在<Col>带有属性的标签中style，我需要将道具传递ratings.category给--ratingscss 变量。我知道如果数字是静态的，我可以轻松通过--ratings: 2.5，这就是我测试代码的方式。然而，在实现中，浮点数将是可变的和变化的。因此问题。

标签： javascripthtmlcssreactjs

Answer 1

首先，我相信

<Col xs="6" class="Stars" style={'--ratings:' ratings.overall}></Col>

应该

<Col xs="6" class="Stars" style={{'--ratings': ratings.overall}}></Col>（注意额外的大括号）

此外，如果值是数字，React 可能会添加 'px'。您可能想要转换为字符串：

<Col xs="6" class="Stars" style={{'--ratings': String(ratings.overall)}}></Col>

UPD

这是最新 React 版本的示例（旧版本不支持通过 style prop 的 css 变量）：https ://codesandbox.io/s/shy-star-mxu74