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

Question

你好 Whosebugers

我想知道是否可以将 styled-component 道具的值放入 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

祝你好运！

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

Styled-components get props value to javascript variable

javascript

reactjs

styled-components