时间戳

首页 > 解决方案 > 使用更少的文本传递道具

reactjs - 使用更少的文本传递道具

问题描述

我最近开始使用样式化组件，我可以看到有什么大惊小怪的，但有些事情我要么没有正确理解，要么根本不干。举个例子，我创建了一个 Card 组件，同时我使用了 Material UI 方案：

import React from 'react'
import styled from 'styled-components/macro'
import Grid from '@material-ui/core/Grid'

const S_Card = styled(Grid)`
    background-color: rgb(191, 161, 228);
    box-sizing: border-box;
    height: ${props => props.height};
    margin: ${props => props.marg}; 
    margin-left: ${props => props.margleft};
    margin-right: ${props => props.margright};
    margin-top: ${props => props.margtop};
    margin-bottom: ${props => props.margbottom};
    padding: ${props => props.pad}; 
    padding-left: ${props => props.padleft};
    padding-right: ${props => props.padright};
    padding-top: ${props => props.padtop};
    padding-bottom: ${props => props.padbottom};
`

export default function Card(props) {
const p = props

return(

    <S_Card 
        container
        item
        xs = {p.xs} 
        md = {p.md}
        alignItems = {p.alignItems}
        justify = {p.justify}
        height = {p.height}
        pad = {p.pad}
        padleft = {p.padleft}
        padright = {p.padright}
        padtop = {p.padtop}
        padbottom = {p.padbottom}
        marg = {p.marg}
        margleft = {p.margleft}
        margright = {p.margright}
        margtop = {p.margtop}
        margbottom = {p.margbottom}
    >
        {p.children}
    </S_Card>

    )
}

假设在这种情况下，我将从其他地方调用这个组件，输入以下内容：

<Card xs = {4} height = '100px' padleft = '10px' padright = '10px' margtop = '20px' margbottom = '20px />'

我认为这里的问题很明显。太多的行只是为了设置像填充和边距这样简单的东西。

我是否必须声明所有这些道具才能将它们传递给样式包装器const S_Card = styled(Grid)`？

对于很多组件来说，似乎要重复大量的行（大多数组件将不得不通过边距、填充等，这意味着很多行）。所以我假设我没有以正确的方式这样做，请问我该如何改进？

标签： reactjsmaterial-uistyled-componentsreact-props

解决方案

您可以使用 Spread 语法 (...) 来清理代码，而不是单独解构每个 prop：

export default function Card(props) {

return(

    <S_Card 
        container
        item
        {...props}
    />

    )
}

扩展符号也将负责渲染children，所以我也很乐意删除它。

推荐阅读