使用React和styled-components的Laravel中的Const定义冲突

Question

我不知道如何在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)

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

任何建议都将不胜感激。

谢谢

Answer 1

您将在第3行导入BlogCard，并且还将创建一个名为BlogCard的样式构件。只需更改其中任何一个的名称，它就会修复错误

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