компоненты в стиле Dynami c с отображенными данными - PullRequest
Новая
       302

компоненты в стиле Dynami c с отображенными данными

0 голосов
/ 14 июля 2020

Я пытаюсь вставить JSON данных, которые в основном выглядят так, внутри json: 

"items": [
  {
    "id": "1",
    "title": "data header one",
    "bgColor": "dark",
    "buttonColor": "red",
    "shadow": false,
    "offset": 1,
    "padding": 0,
  },
  {
    "id": "2",
    "title": "data header two",
    "bgColor": "light",
    "buttonColor": "black",
    "shadow": false,
    "offset": 1,
    "padding": 0,
  }
]

И я пытаюсь сопоставить эти данные внутри следующего. js, используя map().

. Я изо всех сил пытаюсь понять, как передать данные items, такие как «padding», «buttonColor» или «bgColor», обратно в мои стилизованные компоненты за пределами возвращенный рендер. Есть ли способ обойтись без встроенных стилей?

Мой возврат настроен следующим образом: 

return (
  <>
  {items.map(({id, title, bgColor, buttonColor, shadow, padding}) => {
    return (
    <Cta key={id}>
      <Div>
      {title}
      </Div>
    </Cta>
    )}}
  </>
);

И мои стилизованные компоненты настроены следующим образом: 

const Cta = styled.div`
  background: ${bgColor};
  h4 {
  font-weight: bold;
  padding: ${padding}px;
  }
`;

Я урезал код, поэтому не обращайте внимания на неиспользуемые данные.

1 Ответ

1 голос
/ 14 июля 2020

Вот как вы можете использовать свойства объекта для стилизации: 

import React from "react";
import styled from "styled-components";

export default function App() {
  const Cta = styled.div`
    background: ${props => props.bgColor};
    h4 {
      color: blue;
      font-weight: bold;
      padding: ${props => props.padding}px;
    }
  `;

  const elements = items.map(item => (
    <Cta key={item.id} bgColor={item.buttonColor} padding={item.padding}>
      <h4>Heading</h4>
      {item.title}
    </Cta>
  ));

  return <div className="App">{elements}</div>;
}

const items = [
  {
    id: "1",
    title: "data header one",
    bgColor: "dark",
    buttonColor: "red",
    shadow: false,
    offset: 1,
    padding: 10
  },
  {
    id: "2",
    title: "data header two",
    bgColor: "light",
    buttonColor: "black",
    shadow: false,
    offset: 1,
    padding: 0
  }
];

Здесь вы можете узнать больше о передаче данных для стилизации с использованием компонентов props: https://styled-components.com/docs/basics#adapting -based-on- реквизит

...