javascript - Styled-components 获取 props 值到 javascript 变量

Question

你好stackoverflowers

我想知道是否可以将 styled-component Prop 的值放入 javascript 变量中。

例子

<CardBox Columns="3">

我想做的是:

var Columns = props => props.Columns;
var ColumnCount;

for (var i = 0; i < Columns; i++) {
    ColumnCount = ColumnCount + "Auto ";
}

const CardBox = styled.div`
    display: grid;
    grid-template-columns: ${ColumnCount};
`;

但变量 Columns 似乎设置为:

function (props) {
    return props.Columns;
}

而不是我希望的“3”:)

如果可能的话，希望有人能指导我正确的方向。

Answer 1

所以你想要完成的是完全正常的，很多人都在尝试使用。

你主要尝试像这样传递属性:

const CardBox = styled.div`
 width: 100px;
 margin: 10px;
 background: blue;
 height: ${props => props.columns}px; <-- as an example if we need pixels

 //we use props named columns as you will see below
`;


<CardBox columns={i} /> <-- how you pass to a styled component

在您的情况下，您可能需要循环所有组件并像您一样传递参数并渲染它，一切都应该没问题。

我制作了一个简单的 codesanbox 来试用:https://codesandbox.io/s/21v3ql84kj

如果您想要属性传递的文档部分:https://www.styled-components.com/docs/basics#passed-props

祝你好运!