【问题标题】:react how to put a <hr /> between 2 .map?反应如何在 2 .map 之间放置一个 <hr />?
【发布时间】:2020-12-18 18:36:29
【问题描述】:

我是新来的反应,在另一个 .map 中做一个 .map 不是很舒服。

我现在已经完成了,结果就是我想要的,除了一件事。
我想用&lt;hr /&gt; 分隔两个 .maps 之间的结果,但我不知道该放在哪里。
我尝试了不同的地方,比如在第一个 .map 的大括号之后,但它从来没有奏效。
有人可以帮帮我吗?

我的代码:

   {data.map((responses) => {
        return responses.answers.map((element) => {
          return (
            <article>
              <div className="question">
                <div
                  className="square"
                >
                  <span>{element.type === "texte" ? "1" : "2"}</span>
                  <img src={Minus} alt="" />
                  <img
                    src={element.type === "texte" ? FileWhite : StarWhite}
                    alt=""
                  />
                </div>
                <div>{element.question}</div>
              </div>
              {element.type === "texte" ? (
                <div className="answerText">{element.answer}</div>
              ) : (
                <div className="answerNote">
                  <div className="square">
                    <input type="radio" id="note1" name="note" value="1" />
                    <label htmlFor="note1">1</label>
                  </div>

                  <div className="square">
                    <input type="radio" id="note2" name="note" value="2" />
                    <label htmlFor="note2">2</label>
                  </div>

                  <div className="square">
                    <input type="radio" id="note3" name="note" value="3" />
                    <label htmlFor="note3">3</label>
                  </div>

                  <div className="square">
                    <input type="radio" id="note4" name="note" value="4" />
                    <label htmlFor="note4">4</label>
                  </div>

                  <div className="square">
                    <input type="radio" id="note5" name="note" value="5" />
                    <label htmlFor="note5">5</label>
                  </div>
                </div>
              )}
            </article>
          );
        });
      })}
    </div>

【问题讨论】:

    标签: reactjs dictionary


    【解决方案1】:

    &lt;article class="article"&gt;为文章类添加边距。

    【讨论】:

    • 我尝试为文章添加底部边框,但它不起作用。边框出现在第二个 .map 的每个元素之后,我只想要第一个 .map 中的元素的边框。
    • 将整个第一张地图包装在 div 中并为该 div 提供边框。 &lt;div class"border"&gt;{data.map((responses) =&gt; {..}
  • 很好!!!我已经把它包裹起来了,但没有想到给它一个底部边框。谢谢!
  • 好吧,我试过你的提示,但它没有将 hr 放在第一个和第二个 .map 之间,而是放在最后。那么如何在 FIRST .map 的每个元素之间放置一个
    呢?
  • 我在第二个 .map 之后添加了一个 .concate()。这个方法终于奏效了。
  • 猜你喜欢
    • 2019-12-20
    • 2023-03-16
    • 2016-04-25
    • 2018-05-09
    • 2023-03-25
    • 2016-06-24
    • 2019-07-18
    • 1970-01-01
    相关资源
    最近更新 更多