Блог

Я создаю свой первый проект с gatsby и задавался вопросом, возможно ли следующее:

Можно ли создать пользовательскую функцию, которая действует примерно так activeClassName ?

Чего я хочу достичь:

У меня есть простой список

 <ul>
    <li activeItemClassName="active">Item 1</li>
    <li activeItemClassName="active">Item 2</li>
    <li activeItemClassName="active">Item 3</li>
</ul>
  

Теперь я хотел бы иметь какой-то конфигурационный файл, возможно, json, где я могу установить item1: 0/1 , например, и в зависимости от этого значения, activeItemClassName="active" будет применен определенный класс css.

Возможно ли это как-то?

Это широкий вопрос, не зная вашей структуры данных, даже ваших файлов формата. Следующий обходной путь может быть адаптирован к любому типу данных (JSON, markdown и т. Д.).

Допустим, у вас есть один файл markdown для каждого элемента, такой:

 ---
name: Item 1
key: items
active: true
---
## Your Item 1 body
  

Примечание: вы можете адаптировать структуру к файлу формата JSON, идея точно такая же.

Прежде чем запрашивать эти файлы, вы должны правильно настроить свою файловую систему, что-то вроде:

 {
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `items`,
    path: `${__dirname}/src/data/items`,
  },
},
  

Имейте в виду, что в этом примере у вас будет один файл на элемент. В этом случае они будут сохранены в /src/data/items ( /src/data/items/item1.md , etc) . Как только Gatsby распознает ваши файлы, он сможет поместить их в файловую систему, и вы сможете запросить эти файлы через GraphQL на своей странице, используя запрос страницы. На вашей странице:

 const yourPage = ({ data }) => {
   const { allMarkdownRemark } = data;

  return <Layout>
     <ul>
     {allMarkdownRemark.edges.map(({ node: item }) => {
      let { name, active } = item.frontmatter;
      
      return <li className={active ? "myClass" : "myOtherClass"} key={name}>{name}</li>
    });
    }
    </ul>
  </Layout>;
};

export const yourPageData = graphql`
    query getYourPageData{
        allMarkdownRemark(filter: { frontmatter: { key: { eq: "items" }}}) {
            edges {
                node {
                    html
                    frontmatter {
                        name
                        active 
                    }
                }
            }
        }
    }
`;
  

Примечание: ваш запрос может отличаться, если вы используете файл данных другого типа, посмотрите на вашу игровую площадку GraphQL ( localhost:8000/___graphql ), чтобы адаптировать запрос. Это действительно полезное key поле для повышения производительности запроса и избежания извлечения всех данных markdown в этом случае.

Во фрагменте выше много информации, однако она не требует пояснений. На этом этапе вам нужно только запросить ваши данные ( allMarkdownRemark ), фильтруя по key полю. Ваши данные будут храниться под props.data , поэтому вы можете их уничтожить. Следующим шагом будет перебор этих данных (элементов) и получение вашего active значения для установки вашего класса. Не забывайте key о зацикленном элементе. Вам остается только добавить свои стили CSS в этот класс.

Вы можете адаптировать подход markdown к любому типу данных, JSON тоже вполне допустим, и идея точно такая же, она изменит только запрос GraphQL.