如何在ReactJ中旋转伪元素及其内容为SVG

Question

[我的项目的图像]

[1] ： https：//i.sstatic 。

​/I.sstatic.net/lmhnu.png

当我单击橙色箭头时，我想旋转它（180 deg）

是可以使用CSS来完成的，或者我应该使用JS

以及如何声明可变并给予它是伪元素作为Reactjs

<div className="container">
        <div className="imgBox">
          <img src={img_1} alt="img_1" className="img_1" />
          <img src={img_2} alt="img_2" className="img_2" />
        </div>

        <div className="textBox">
          <h1>FAQ</h1>
          <div className="questions">
            <div>
              <button
                onClick={() => {
                  hideText(p1);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p1} className="p1 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p2);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p2} className="p2 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p3);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p3} className="p3 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p4);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p4} className="p4 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />

            <div>
              <button
                onClick={() => {
                  hideText(p5);
                }}
              >
                How many team members can I invite?
              </button>
              <p ref={p5} className="p5 not-active">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Temporibus obcaecati, quae, corporis.
              </p>
            </div>

            <hr />
          </div>
        </div>
      </div>

样式的值

.container>.textBox>.questions>div>button {
  width: 100%;
  height: 30px;
  background: transparent;
  color: var(--Very-dark-grayish-blue);
  font-size: 15px;
  text-align: left;
  border: 0;
  cursor: pointer;
  outline: none;
}

.container>.textBox>.questions>div>button:hover {
  color: var(--Soft-red);
}

.container>.textBox>.questions>div>button:focus {
  font-weight: bold;
}

.container>.textBox>.questions>div>button::after {
  content: url(./images/icon-arrow.svg);
  float: right;
}

.container>.textBox>.questions>div>button::after:focus {
  transform: rotate(180deg);
}

Answer 1

您尚未发布您的标记，但是只需使用＆lt;详细信息＆gt;披露元素就可以使用html/css进行大量清洁。在此处阅读MDN文档： https> https：https：https：//开发人员。 mozilla.org/en-us/docs/web/html/element/details

您可以完全控制其样式，包括隐藏标记psuedo元素。在此线程中有一个具体答案，您会发现它有用： html/summary详细信息标记造型

这是可以开始的片段。我也从CSS中拿出了箭头，因为我没有您的SVG。您需要用您的背景图像等替换的内容：选择器之后，然后再替换[open] selector。

details {
  width: 400px;
  border: 1px solid #ccc;
  padding: 10px;
}

details summary:after {
  border-bottom: 2px solid orange;
  border-right: 2px solid orange;
  content: "";
  display: inline-block;
  height: 7px;
  margin: 2px 0.5rem 0 0;
  float: right;
  transform: rotate(45deg);
  width: 7px;
}

details summary::-webkit-details-marker,
details summary::marker {
  display: none;
  content: "";
}

details[open]>summary:after {
  transform: rotate(-135deg) translate(-4px, -3px);
}

<details>
  <summary>Section title</summary>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</details>