reactjs - 如何将样式化组件用于未出现在初始渲染中的元素？

问题描述

我发现样式化的组件，当不包含在初始渲染树中时，没有正确的 CSS。

这是一个例子：

我有一个分页的“向导”界面，显示返回和下一步按钮。在第一页上，出于显而易见的原因，没有后退按钮。然而，大概是因为后退按钮最初没有得到它的条件 CSS，样式化组件没有为它设置一个类。在随后的页面上，后退按钮完全没有任何样式出现：

<ButtonRow>
  {canGoBack && (
  <Button text='Back' />
  )}
  {canAdvance && (
  <Button primary leftSpaced text='Next' />
  )}
</ButtonRow>

canGoBack = false在第一次渲染时，true在用户前进之后。但是推进之后，后退按钮就出现了，完全没有 CSS，只是一个开箱即用的 HTML 按钮。

我意识到我可以做一些事情，比如给辅助按钮 0 不透明度，而不是将其完全排除在渲染树之外，但是在其他情况下，我想根据状态更改渲染树，但我不知道如何让样式化的组件在这种情况下工作。

这是Button课程：

import React, { Component } from 'react';
import styled, { css } from 'styled-components';

const StyledButton = styled.button`
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 20px;
    padding: 9px 44px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    ${props => props.primary ? css`
        color: #FFF;
        box-shadow: 0 1px 2px 0 #A0A0A0;
        background-color: #3E8FF6;
    ` : css`
        color: #555;
        box-shadow: 0 1px 2px 0 #F0F0F0;
        background-color: #FFF;
    `}
    ${props => props.leftSpaced && css`
        margin-left: 6px;
    `}
    &:focus {
        outline: 0;
    }
`;

export default class Button extends Component {
    render() {
        return (
            <StyledButton
                onClick={this.didClick}
                primary={this.props.primary}
                type={this.props.type || 'button'}
                leftSpaced={this.props.leftSpaced}>{this.props.text}</StyledButton>
        )
    }
}

标签： reactjsstyled-components

多亏了 Oluwafemi Sule 的帮助，我才得以彻底解决这个问题。这是一个非常非常具体的冲突，而不是一般问题。在我的项目中，我使用了一个 cytoscape 插件cytoscape-node-html-label（https://github.com/kaluginserg/cytoscape-node-html-label），它似乎写了与styled-components. 一旦我禁用它，我的样式组件就会完美呈现，就像评论中 Oluwafemi 的演示一样。

reactjs - 如何将样式化组件用于未出现在初始渲染中的元素？

问题描述

解决方案

推荐阅读