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

#reactjs #laravel #styled-components

Вопрос:

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

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

Я использую 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 }
]

1. Что вы подразумеваете под обновлением компонента?

2. Я имел в виду обновление браузера во время работы с этим компонентом

3. @xDreamCoding ^

4. Как вы выполняете маршрутизацию? Также кажется, что вы каждый раз создаете встроенный в свой рендеринг стилизованный компонент. Попробуйте сохранить его в const вне вашего класса и использовать его в качестве jsx-тега в вашем рендеринге

5. @xDreamCoding Я создаю свой стилизованный компонент в const вне моего класса react, далее сразу после импорта. А затем использует его с тегом jsx. И я обновил сообщение, чтобы показать, как выполняется моя маршрутизация.

Ответ №1:

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

Вы бы исправили это следующим образом:

 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, а не через класс.

1. точки останова — это файл javascript с разными точками останова, т.е.: const точки останова = { mobile: (… args) => css` @media (min-width: ${theme.breakpoints[0]}) { ${css(…args)}; } , tablet: (...args) => css @media (min-width: ${theme.breakpoints[1]}) { $ {css(…args)}; } ` Поэтому оформленный контейнер должен быть стилизованный div. Я собираюсь немного реорганизовать, чтобы card также был стилизованным компонентом, чтобы посмотреть, поможет ли это. Я вернулся к использованию простого css, и проблема, похоже, исчезла, так что, должно быть, задержка рендеринга.