在组件中引用另一个组件时遇到问题答案

【问题标题】：Having trouble referring to another component within a component在组件中引用另一个组件时遇到问题
【发布时间】：2019-07-02 22:29:08
【问题描述】：

我正在尝试根据它在页面上显示的顺序更改 div 上的浮动 - 例如奇数左浮动，偶数右浮动——但是当我在现有组件中引用该组件时什么都没有发生。

这是使用 gatsbyjs 和样式组件在 reactjs 中构建的。

如果我执行以下操作，我可以让 &:nth-of-type(even) 工作：

${Image}:before {
    background: red;
}

但是没有 ':before' 什么都不会发生。至少没有什么我能说的。

更具体地说——也许有更好的方法来做到这一点——我正在尝试做的是即使是 BlogList 中的文章，图像也会向右浮动。奇怪的文章向左浮动。我已经简化了我的代码，因为你们都不需要看到背景颜色等。

const Wrapper = style.article`
    &:nth-of-type(even) {
        ${Image} {
            float: right;
        }
    }
`;

const Image = style.div`
    float: left;
`;

const Info = style.div`
    float: right;
`;

const BlogList = ({ title, cover, excerpt }) => (
    <Wrapper>
        <Image>
            <Img fluid={cover} />
        </Image>
        <Info>
            <h2>{title}</h2>
            <p>{excerpt}</p>
        </Info>
    </Wrapper>
);

理论上，顺便说一下，我应该让 in 事件向左浮动。但我不是。我在这里错过了什么？

【问题讨论】：

为什么const 关键字和变量名之间有等号？
那是我打字太快了。那里没有等号。
也许你需要让Info 也向左浮动
如果我只在Wrapper 内应用浮点数，如下所示：` &:nth-of-type(odd) { ${Image} { float: right; } ${Info} { 浮动：左； } } &:nth-of-type(even) { ${Image} { float: left; } ${Info} { 浮动：对； } } `它...仍然无法正常工作。现在什么都没有了。我确信我在 ${component} 和左大括号之间缺少 something ，但我尝试过的都没有。

标签： reactjs gatsby styled-components

【解决方案1】：

如果您在Wrapper 中引用它们，则必须在Wrapper 之前声明Image 和Info。

const Image = style.div`
    float: left;
`;

const Info = style.div`
    float: right;
`;

const Wrapper = styled.article`
  ${Info} { ... }
  ${Image} { ... }
`

否则，styled-component 将不知道其他组件是什么。我很惊讶它没有抛出错误。

【讨论】：

【解决方案2】：

我已经想通了。原来我指的是向后的组件。虽然我确信有一个更清晰的答案，但以下内容对我有用：

const Wrapper = styled.article`
`;

const Image = styled.div`
    ${Wrapper}:nth-of-type(odd) & {
        float: left;
    }
    ${Wrapper}:nth-of-type(even) & {
        float: right;
    }
`;

const Info = styled.div`
    ${Wrapper}:nth-of-type(odd) & {
        float: right;
    }
    ${Wrapper}:nth-of-type(even) & {
        float: left;
    }
`;

【讨论】：