我在命名这个问题时遇到了麻烦,而且它似乎很广泛,所以,请原谅我哦版主。我第一次尝试样式化组件并尝试将其集成到我的反应应用程序中。到目前为止,我有以下内容:
import React from 'react';
import styled from 'styled-components';
const Heading = styled.h1`
background: red;
`;
class Heading extends React.Component {
render () {
return (
<Heading>
{this.props.title}
</Heading>
);
}
}
export default Heading;
所以,只是一个普通的类,但然后我导入styled components
顶部,定义const Heading
,我指定 aHeading
真的只是一个样式化的h1
。但是我收到一个错误,指出这Heading
是一个重复的声明,因为我也说class Heading...
.
我显然在这里完全遗漏了一些东西。所有在线示例实际上并没有显示您如何将它与 React 一起使用。即我在哪里定义我的类、我的构造函数、设置我的状态等。
我是否必须将样式化的组件移动到它自己的文件中,即:
import styled from 'styled-components';
const Heading = styled.h1`
background: red;
`;
export default Heading;
然后创建一个 React 组件,作为各种包装器,例如“HeadingWrapper”:
import React from 'react';
import Heading from './Heading';
class HeadingWrapper extends React.Component {
render () {
return (
<Heading>
{this.props.title}
</Heading>
);
}
}
export default HeadingWrapper;
对此有一点澄清将不胜感激!谢谢 :)