代码之家 › 专栏 › 技术社区 › Corcor

具有映射数据的动态样式组件

styled-components next.js reactjs

Corcor · 技术社区 · 4 年前

我试图在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,
  }
]

我试图通过使用以下命令将这些数据映射到next.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 回复 | 直到 4 年前

macborowy 4 年前

以下是如何使用对象属性进行样式设置:

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-props

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

3 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

4 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

4 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

4 月前

noblerare · Vite错误-未定义导出(SSR)

4 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

4 月前