Тег в стиле React jsx не применяется к тегам, возвращаемым функциями

#css #reactjs #jsx

Вопрос:

Я пытаюсь применить стиль к тегам, которые генерируются из цикла for внутри функции. Проблема в том, что стиль внутри тега не применяется к этим сгенерированным тегам. Возможно, потому, что они генерируются после применения стиля? Я не уверен. Вот пример:

 generateTags = (size) => {
    let tags = []
    for (var i = 0; i < size; i  ) {
        tags.push(<img className="image-tag" src={this.state.imagePath} alt="image" key={Math.random() * Math.floor(100000)}/>)
    }
    return tags
}

render() {
    return (
        <div className="main">
            <div className="left-container">
                {this.generateTags(10)}
            </div>
        <style jsx> {`
            .main { <-- This is properly applied
                position: relative;
                width: 100%;
                height: 100%;
            }
            .image-tag { <-- This doesn't work
                position: absolute;
                width: 50px;
            }
        `} </style>
        </div>
    )
}

Ширина: 50 пикселей не применяется к изображению, и ничто из того, что я размещаю, не имеет никакого значения. Но когда я добавляю стиль в тег следующим образом:

 <img className="image-tag" style={{width: "50px"}} src={this.state.imagePath} alt="image" key={Math.random() * Math.floor(100000)}/>

Тогда стиль применяется правильно. Означает ли это, что я не могу использовать css в теге style, если элементы возвращаются из функции?

1. можете ли вы убедиться, что тег стиля и его содержимое действительно отображаются корректно на странице вывода?

2. почему бы вам не встроить стили в основные теги div и img

3. @Sujit. Warrier Я считаю гораздо более удобным для чтения, если стили в их обычном формате красиво вложены в конец файла. Также тег стиля гарантирует, что стили не будут применены к тем же именам классов, которые присутствуют в других компонентах.

4. @NikosM. Стиль применяется только тогда, когда он встроен в сам тег. Я сразу замечаю шанс. Когда стиль находится внутри тега стиля jsx, он не имеет никакого эффекта.

Ответ №1:

Похоже, вы используете стилизованный JSX. Один из принципов стилизованного JSX заключается в том, что CSS зависит от компонента. Поскольку ваши <img> теги создаются вне render() функции, в которой определены ваши стили, они не применяются.

В этом случае я бы рекомендовал вместо GenerateTags функции использовать компонент React . Таким образом, вы можете генерировать свои теги по мере необходимости, а также применять стиль, специфичный для компонента, например:

 GenerateTags = (props) => {
    const {size} = props

    let tags = []

    for (var i = 0; i < size; i  ) {
        tags.push(i)
    }

    return(
        <>
            {tags.map((tag, index) => (
                <img className="image-tag" src={this.state.imagePath} alt="image" key={Math.random() * Math.floor(100000)}/>
            ))}

            <style jsx>{`
                // This will now work as it is in the same scope as the component
                .image-tag {
                    position: absolute;
                    width: 50px;
                }
            `}</style>
        </>
    )

    return tags
}

render() {
    return (
        <div className="main">
            <div className="left-container">
                <GenerateTags size={10} />
            </div>
        <style jsx> {`
            .main { <-- This is properly applied
                position: relative;
                width: 100%;
                height: 100%;
            }
        `} </style>
        </div>
    )
}

В противном случае, если вы хотите, чтобы эти стили применялись за пределами области действия компонента, вы можете использовать global опцию:

 <style jsx global>
  ...
</style>