Стилизованные компоненты - стили в компоненте не будут применяться, пока я не обновлюсь. Обновление одного компонента нарушает стили другого

У меня есть домашний компонент и компонент проектов. Используя styled-components, я динамически устанавливаю свойство flexbox в компоненте проектов в зависимости от количества проекты входят в реквизит. Но стиль не будет применяться, пока я не обновлю компонент. Затем, если я вернусь домой, стили этого компонента будут повреждены, пока я не обновлюсь.

Кажется, что обновление одного компонента нарушает стили другого.

Я использую Laravel с предустановкой интерфейса React.

Код реакции:

<ProjectsWrapper projects={projects}>

Стилизованный код компонента:

${breakpoints.tablet`
   .card {
      flex-basis: ${props => props.projects < 3 ? '50%' : '33%'};
   }
`};

ОБНОВЛЕНО, ЧТОБЫ ПОКАЗАТЬ МАРШРУТ:

return (
            <SiteWrapper>
                <div className="container-fluid">
                    <Router>
                        <Switch>
                            <Route
                                render={({ location }) => (

                                (more code such as navigation...)

                                <div style={{ position: 'relative' }}>
                                            {routes.map(({ path, Component }) => (
                                                <Route key={path} exact path={path}>
                                                    {({ match }) => <Component data={dataObject} imagepath={imagePath} in={match != null} />}
                                                </Route>
                                            ))}
                                        </div>
                                    </div>
                                )}
                              />
                        </Switch>
                    </Router>
                </div>
            </SiteWrapper>
)

«Маршруты», которые он отображает, представляют собой объект, содержащий:

const routes = [
    { path: '/', name: 'Home', Component: HomePage },
    { path: '/about', name: 'About', Component: AboutPage },
    { path: '/projects', name: 'Projects', Component: ProjectsPage },
    { path: '/blog' , name: 'Blog', Component: BlogPage }
]

reactjs styled-components laravel
person Nats    schedule 27.03.2019    source источник
comment
Что вы имеете в виду под компонентом обновления?   -  person xDreamCoding    schedule 27.03.2019
comment
Я имел в виду обновить браузер, пока работал с этим компонентом.   -  person Nats    schedule 28.03.2019
comment
@xDreamCoding ^   -  person Nats    schedule 28.03.2019
comment
Как дела с маршрутизацией? Также кажется, что вы каждый раз создаете встроенный в свой рендер компонент со стилем. Попробуйте сохранить его в константе вне вашего класса и использовать как jsx-тег в своем рендере   -  person xDreamCoding    schedule 28.03.2019
comment
@xDreamCoding Я создаю свой стилизованный компонент в константе вне моего класса реакции, сразу после импорта. А затем используя его с тегом jsx. И я обновил сообщение, чтобы показать, как выполняется моя маршрутизация.   -  person Nats    schedule 29.03.2019
comment
Насколько вы разбираетесь в инструментах разработчика Chrome? Я рекомендую получить аддон React Dev и наблюдать за оформлением стилизованных компонентов во время навигации, а также проверить, применяется ли ваш CSS.   -  person xDreamCoding    schedule 29.03.2019

Ответы (1)


arrow_upward
0
arrow_downward

Поэтому я действительно не понимаю, как вы здесь используете стилизованные компоненты, я не знаю, что такое breakpoints.tablet, но я предполагаю стилизованный компонент.

Вы бы изменили это так:

const StyledCardContainer = styled(breakpoints.tablet)`
   .card {
      flex-basis: ${props => props.projects < 3 ? '50%' : '33%'};
   }
`;

и в рендере вашего ProjectsWrapper я предполагаю:

<StyledCardContainer projects=${this.props.projects}>
   <div class="card">...</div>
</StyledCardContainer

хотя CSS следует применять непосредственно к стилизованному компоненту StyledCard, например, а не через класс.

person xDreamCoding    schedule 28.03.2019
comment
точки останова - это файл javascript с разными точками останова, например: const breakpoints = {mobile: (... args) = ›css` @media (min-width: $ {theme.breakpoints [0]}) {$ {css (.. .args)}; } , tablet: (...args) => css @media (минимальная ширина: $ {theme.breakpoints [1]}) {$ {css (... args)}; } `Таким образом, стилизованный контейнер должен быть стилизованным div. Я собираюсь немного провести рефакторинг, чтобы эта карточка также стала стилизованным компонентом, чтобы посмотреть, поможет ли это. Я вернулся к использованию простого CSS, и проблема, похоже, исчезла, поэтому должна быть задержка рендеринга. - person Nats; 30.03.2019