Question

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

但是，这不起作用。 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

Answer 1

您没有将任何道具传递给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

Answer 2

尝试将道具传递给样式化的组件

my_list = [
    [2,1024,8,8],
    [4,1024,16,32],
    [2,32,64,128],
    [8,256,2,2]
]

number_rows = len(my_list)
if number_rows == 0:
    raise ValueError("Cannot play with an empty matrix!")
length_row = len(my_list[0])

# verify that every row length is equal to the first found
for row in range(number_rows):
    assert len(my_list[row]) == length_row

def sum_up_down(row, col):
    """Returns a tuple holding the element found at (row,col),
    the sum with its upper value and the sum with its lower value
    in the matrix (only if the element is not boundary)."""
    elem = my_list[row][col]
    up_sum = elem
    down_sum = elem

    if row != 0:  # can sum up
        up_sum += my_list[row-1][col]

    if row != number_rows - 1:  # can sum down
        down_sum += my_list[row+1][col]

    return elem, up_sum, down_sum

def find_number(number):
    """Find the choosen number in my_list applying sum_up_down
    row*col times. If found, returns True, False otherwise."""
    for row in range(number_rows):
        for col in range(length_row):
            result = sum_up_down(row, col)
            if number in result:
                print(
                    "{} was found as elem / sum up / sum down of {} ({},{})".format(
                        number, result[0], row, col
                    )
                )
                return True
    print("{} not found!".format(number))
    return False

# show matrix
for row in my_list:
    print(row)

while True:
    number = int(input("Insert the number you want to find: "))
    find_number(number)

或通过破坏而通过

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

React Gatsbyjs-通过样式组件传递道具

2 个答案: