Question

Hello stackoverflowers

我想知道是否有可能将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

在你的情况下，你可能需要循环所有的组件并按照你的方式传递参数，只需渲染它，一切都应该没问题。

我制作了一个简单的代码框来试用它：https://codesandbox.io/s/21v3ql84kj

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

祝你好运！

样式组件获得javascript变量的道具值

1 个答案: