Question

我正在尝试将样式应用于从函数内部的for循环生成的标签。问题在于标签内的样式不适用于这些生成的标签。可能是因为它们是在应用样式后生成的？我不确定。这是一个示例：

const websiteEmailRegex = 'mailto:([^\"\']+)';

宽度：50像素不应用于图像，我放置的任何内容都没有任何区别。但是，当我在标签中添加样式时，就像这样：

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>
    )
}

然后正确应用样式。如果元素是从函数返回的，这是否意味着我不能在style标签中包含CSS？

Answer 1

您似乎正在使用Styled 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>

React jsx样式标签不适用于函数返回的标签

1 个答案: