Блог

Я хочу создать компонент нижнего колонтитула в react с заголовком и несколькими ссылками под ним, как на изображении.

Также я хочу передать только массив для ссылок, как показано ниже.

 const FooterLinksData = [
    {
        link1: "Insolvers",
        link2: "How it works?",
        link3: "I'm looking for job",
        link4: "I'm looking to hire",
    },
    {
        link1: "Features",
        link2: "Pricing",
        link3: "Schedule a Demo",
    },
];
 

Мой код:

   return (
        <>
            <li>
                <a href="/" className="footer_link">
                    {props.data[`link${props.num   1}`]}
                </a>
            </li>
            // I have written this li tag for times in my code
            // props.data is the array I passed using the parent
            // props.num is the number (0 in this case) to get link1 from 
            // the object
        </>
    );
 

Моя проблема заключается в том, что первый объект в массиве содержит 4 элемента, в то время как у второго только 3 элемента. Есть ли какой-либо способ сделать для него многоразовый компонент?

 You can add the title inside the json and use it to bracke. Something like


    const FooterLinksData = [
       {
          "title":"some title",
          "links":[
             "Insolvers",
             "How it works"
          ]
       },
       {
          "title":"some other title",
          "links":[
             "other Insolvers",
             "other How it works"
          }]
    ];

so then you will do something like:

FooterLinksData.map(({title, links}) => ({
    <div>
       <div>{title}</div>
       <ul>{links.map(link => <li>{link}</li>)}</ul>
    </div>
  })
})
 

Если вы зададите этот вопрос, я предполагаю, что вы используете FooterLinksData[x].link1, FooterLinksData[x].link2, FooterLinksData[x].link3 ..... для отображения своих ссылок.

Вы можете изменить свой код, чтобы вместо этого использовать функцию map (), не имея необходимости иметь дело с фиксированным количеством ссылок.

Не могу действительно помочь с кодом, так как вы не опубликовали, как вы отображаете свои ссылки.