我想让我的网站的侧边栏成为一个可重用的组件，但我不知道怎么做

Question

我有一个博客，有很多页面，而且一直在添加更多页面，因为它还在建设中。侧边栏经常变化，手动修改所有页面的所有侧边栏是乏味的。

我还没有学习更多关于编码的知识，我不知道如何创建可重用的组件。我在网上阅读了它并尝试了各种反应，但我所做的没有奏效。 这是侧边栏的代码：

<td class="col1">

            <h3 style="font-variant: small-caps; font-weight:bold; color: #5C331B;">&nbspArt&nbsp</h3>

             <p>
              <a style="display: block;" href="Theodor Kittelsen.html">&nbspTheodor Kittelsen&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Eilif Peterssen.html">&nbspEilif Peterssen&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Mikhail Nesterov.html">&nbspMikhail Nesterov&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Caspar David Friedrich.html">&nbspCaspar David Friedrich&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Hans Thoma.html">&nbspHans Thoma&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="George Inness.html">&nbspGeorge Inness&nbsp</a>
             </p>

             <h3 style="font-variant: small-caps; font-weight:bold; color: #5C331B;">&nbspPoetry&nbsp</h3> 
            
             <p>
              <a style="display: block;" href="PERCY BYSSHE SHELLEY.html">&nbspPercy Bysshe Shelley&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="ALGERNON CHARLES SWINBURNE.html">&nbspAlgernon Charles Swinburne&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Rainer Maria Rilke.html">&nbspRainer Maria Rilke&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="LORD TENNYSON.html">&nbspLord Tennyson&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Thomas Stearns Eliot.html">&nbspThomas Stearns Eliot&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="John Keats.html">&nbspJohn Keats&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="William Wordsworth.html">&nbspWilliam Wordsworth&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="William Blake.html">&nbspWilliam Blake&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Johann Wolfgang von Goethe.html">&nbspJohann Wolfgang von Goethe&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="William Butler Yeats.html">&nbspWilliam Butler Yeats&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Ovid.html">&nbspOvid&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Mixed.html">&nbspMixed&nbsp</a>
             </p>

             <h3 style="font-variant: small-caps; font-weight:bold; color: #5C331B;">&nbspMusıc&nbsp</h3>

             <p>
              <a style="display: block;" href="Tenhi.html">&nbspTenhi&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Empyrium.html">&nbspEmpyrium&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Ulver.html">&nbspUlver&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Öröm.html">&nbspÖröm&nbsp</a>
             </p>
             <p>
              <a style="display: block;" href="Savall.html">&nbspJordi & Arianna Savall&nbsp</a>
             </p>


             <div class="box" style="background-color: #7d9ea2f4; padding: 2px; border-width: 1px; border-color: rgb(175, 164, 157); border-style: solid;">
              <p>
              <img src="PinIt.png" alt="Pin it button" height="20px" width="23px">
              <a href="" data-pin-do="buttonPin" data-pin-shape="round">Pin this page for later</a>
              </p>
    
    
              <p>
                <img src="envelope.png" alt="Email icon" style="margin-right: 2px; margin-bottom: 2px; height: 20px; width: 26px;">
                <a href="mailto:?" data-pin-do="buttonPin" data-pin-shape="round">Email yourself this page</a>
    
              </p>
               <p>
                  <img src="pinterest-icon.png" alt="pinterest logo" style="margin-top: 2px; margin-right:12px; margin-bottom: 20px; height: 25px; width: 25px; float: left">
                  </p>
                  <p>
                    <a href="https://tr.pinterest.com/cerenntubaa/" data-pin-do="buttonPin" data-pin-shape="round">Pinterest Boards</a>
                  </p>
              </div>

            </td>

Answer 1

嗨，首先创建一个对象数组，将数据传递给侧边栏组件

[
  {
     href: ....
     text: ....
  }
]

然后就可以映射这个对象数组了

 {dataSet.map((element, index) => {
            return <p>
                      <a style="display: block;" href=data.html>{data.text}</a>
                  </p>
          })}

我想这会解决你的问题