Блог

Главная - Вопросы по программированию - Используйте стилизованные компоненты с объектами данных

Используйте стилизованные компоненты с объектами данных

#javascript #css #reactjs #styled-components #react-props

Вопрос:

Мой вопрос: Это способ стилизовать отдельные слова в объекте данных?

пример ->

 export const dataObj = {
    id: 'solution',
    lightBg: false,
    lightText: true,
    lightTextDesc: true,
    topLine: '',
    topLineNO: '',
    headLine: 'I want to style "**This**" for example',
    headLineNO: '',
    buttonLabel: 'Read more',
    buttonLabelNO: 'Les mer',
    imgStart: true,
    img: require('../../../assets/img/zeiptisland.png'),
    alt: 'about img',
    dark: true,
    primary: true,

Допустим, в теге заголовка я хочу добавить только слово «Это», например, изменить цвет только на «Это», например. Пожалуйста, кто-нибудь, скажите мне, что есть способ! 😛

Ниже приведен компонент, который я использую для повторного использования.

 <Container lightBg={lightBg} id={id}>
                <ContainerWrapper>
                    <SolutionRow imgStart={imgStart}>
                        <Column1>
                            <TextWrapper>
                                <TopLine>
                                    {language === "no" ? topLineNO : topLine}  
                                </TopLine>
                                <Heading>
                                    {language === "no" ? headLineNO : headLine}
                                </Heading>
                                <Line></Line>
                                <Subtitle>
                                    {language === "no" ? descriptionNO : description}
                                </Subtitle>
                                
                                <BtnWrap>
                                    <Explore 
                                        smooth={true}
                                        duration={500}
                                        spy={true}
                                        exact="true"
                                        offset={-80}
                                        primary={primary ? 1 : 0}
                                        dark={dark ? 1 : 0}
                                        dark2={dark2 ? 1 : 0}
                                    >
                                        {language === "no" ? buttonLabelNO : buttonLabel}
                                    </Explore>
                                </BtnWrap>
                            </TextWrapper>
                        </Column1>
                        <Column2>
                            <ImgWrap>
                                <Img src={img} alt={alt} />
                            </ImgWrap>
                        </Column2>
                    </SolutionRow>
                </ContainerWrapper>
            </Container>
        </div>
    )
}

export default Content;

Комментарии:

1. Я не уверен, что понимаю. Похоже, ты не пользуешься dataObj ни headLine где-то еще. Можете ли вы показать код, который вы на самом деле визуализируете headLine ?

2. в компоненте «Контейнер» внутри тега «Заголовок» я использую состояние языка, в котором будет отображаться либо «Заголовок», либо «Заголовок», в зависимости от того, какой язык я выбрал. Эти два-данные, которые лежат внутри dataObj.. Так что, как вы можете видеть, я не могу поместить стиль непосредственно в свой компонент и выбрать слово, которое я хочу отдельно стилизовать.

3. Нет. вы не можете поместить стиль в свой объект, и он волшебным образом визуализируется для вас. Вы должны сначала обработать заголовок, чтобы получить правильный формат (вы можете создать функцию для поиска всего слова и заменить его <span className=»текст-полужирный»><span className=»текст-полужирный»>)

4. @VoQuocThang, хорошо, спасибо, что прояснили это. Но есть ли у вас пример этой функции?

Метки: