时间戳

首页 > 解决方案 > 使用 React 和样式组件在 Laravel 中的 const 定义冲突

javascript - 使用 React 和样式组件在 Laravel 中的 const 定义冲突

问题描述

我不知道如何在 Laravel 中结合使用样式组件和 React。当我尝试定义样式时，它的名称与我要设置样式的 React 组件的导入表单冲突：

import ReactDOM from 'react-dom';
require('./BlogBody.css')
import BlogCard from './BlogCard';
import styled from 'styled-components';

let BlogCard =  styled.div`
                    width: 413px;
                    height: 380px;
                    z-index: 10;
                    background: linear-gradient(180deg, ${props => props.color.COLOR1} 0%, ${props => props.color.COLOR2} 100%);
                    border-radius: 30px;
                    `;


class BlogBody extends Component {

    


    render() {

        let colorsArray = {
            PURPLE: {
                COLOR1 : "#CC4DA1",
                COLOR2 : "#8C13B8"
            },
            RED: {
                COLOR1 : "#C9522C",
                COLOR2 : "#8B0B0B"
            },
            BLUE: {
                COLOR1 : "#2598EC",
                COLOR2 : "#133FB8"
            },
            GREEN: {
                COLOR1 : "#1BC618",
                COLOR2 : "#7C992B"
            }   
        };

        function colorCalculator(index) {

            let colorIndex = (index+1)%4
             switch (colorIndex) {
                 case 1:    return colorsArray.PURPLE;
                 case 2:    return colorsArray.RED;
                 case 3:    return colorsArray.BLUE;
                 default:   return colorsArray.GREEN;
             }
        }

        let articlesObject = JSON.parse(this.props.articles);

        return (

            <div className="blogBody">
                { articlesObject.map((article, index) => (
                                
                                <BlogCard
                                    key = {index}
                                    title = {article.title}
                                    slug = { article.slug }
                                    // text =  {article.body}
                                    createdAt = { article.created_at }
                                    color = { colorCalculator(index) }
                                /> 
                        )
                )}
            </div>
        
        );
    }
}

export default BlogBody;

此代码抛出：

BlogCard.js: Identifier 'BlogCard' has already been declared (16:6)

这是因为组件和样式都必须具有相同的常量名称。

任何建议将不胜感激。

谢谢

标签： javascriptreactjslaravelstyled-components

解决方案

您正在BlogCard第 3 行导入，并且还创建了一个名为BlogCard. 只需更改其中任何一个的名称，它就会修复错误

我不确定为什么你需要两者，但如果目标是重新设置导入BlogCard的样式，那么将你的样式组件更改为 -const StyledBlogCard = styled(BlogCard)...

推荐阅读