React Gatsbyjs - 使用样式组件传递道具答案

【问题标题】：React Gatsbyjs - Passing props with styled componentsReact Gatsbyjs - 使用样式组件传递道具
【发布时间】：2019-11-11 01:11:33
【问题描述】：

我在带有样式组件的 GatsbyJS 项目中遇到问题。我将一个 prop 传递给 ContentBlock 组件，然后该组件应传递给样式化的 StyledContentBlock 组件，该组件应根据 prop 的值进行调整。

但是这不起作用。 CSS 永远不会改变，将fullWidth 设置为true 无效。

ContentBlock 组件：

import PropTypes from "prop-types"
import React from "react"
import styled from "styled-components"
import device from "../shared/devices"
import H2 from "./h2"

const StyledContentBlock = styled.div`
  @media ${device.mobile} {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  @media ${device.tablet} {
    grid-column-start: 1;
    grid-column-end: ${props => props.fullWidth ? 7 : 4};
  }
`

const ContentBlockHeading = styled(H2)`
  @media ${device.mobile} {
    margin-bottom: 20px;
  }

  @media ${device.tablet} {
    margin-bottom: 20px;
  }

  @media ${device.desktop} {
    margin-bottom: 22px;
  }
`

const ContentBlock = ({ title, fullWidth, children }) => (
  <StyledContentBlock>
    <ContentBlockHeading>{title}</ContentBlockHeading>
    {children}
  </StyledContentBlock>
);

ContentBlock.propTypes = {
  title: PropTypes.string,
  fullWidth: PropTypes.bool,
  children: PropTypes.node.isRequired,
}

ContentBlock.defaultProps = {
  title: '',
  fullWidth: false,
}

export default ContentBlock

在页面上使用它：

import React from "react"

import Layout from "../components/layout"
import ContentBlock from "../components/content-block"

const IndexPage = () => (
  <Layout>
    <ContentBlock title="Some title">
    </ContentBlock>
    <ContentBlock title="Some other title" fullWidth>
    </ContentBlock>
  </Layout>
)

export default IndexPage

我没脑子。这里发生了什么？我也尝试不使用模式匹配并直接访问 props 对象。无效：

const ContentBlock = (props) => (
  // etc

【问题讨论】：

是的。傻我。谢谢！
刚刚让我的评论成为答案，抱歉删除它:)
传递道具，希望能解决问题

标签： javascript reactjs gatsby

【解决方案1】：

尝试将 props 传递给样式化组件

const ContentBlock = (props) => (
  <StyledContentBlock {...props}>
    <ContentBlockHeading>{props.title}</ContentBlockHeading>
    {props.children}
  </StyledContentBlock>
);

或通过解构传递

const ContentBlock = ({ title, fullWidth, children }) => (
  <StyledContentBlock fullWidth={fullWidth}>
    <ContentBlockHeading>{title}</ContentBlockHeading>
    {children}
  </StyledContentBlock>
);

【讨论】：

【解决方案2】：

你没有将任何道具传递给StyledContentBlock，试试这个：

const ContentBlock = ({ title, fullWidth, children }) => (
  <StyledContentBlock fullWidth={fullWidth}>
    <ContentBlockHeading>{title}</ContentBlockHeading>
    {children}
  </StyledContentBlock>
);

如文档中所示：https://www.styled-components.com/docs/basics#adapting-based-on-props

【讨论】：