如何在我的反应应用程序中使用样式化组件？

Question

我很难指出这个问题，它看起来很宽泛，所以，请原谅哦哦版主。我第一次尝试styled components并尝试将其整合到我的反应应用程序中。我见到目前为止如下：

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，在这里我指定一个Heading真的只是一个风格h1。但是我得到一个错误，说明Heading是重复声明，因为我也说class Heading...。

我显然完全缺少这里的东西。在线的所有例子并没有真正显示你如何在React中使用它。即我在哪里定义我的课，我的构造，设置我的状态等

我必须样式的组件移动到它自己的文件，即：

import styled from 'styled-components'; 

const Heading = styled.h1` 
    background: red; 
`; 

export default Heading; 

然后创建一个阵营组成部分，将成为作为各种包装，例如'HeadingWrapper'：

import React from 'react'; 
import Heading from './Heading'; 

class HeadingWrapper extends React.Component { 

    render() { 

     return (
      <Heading> 
       {this.props.title} 
      </Heading> 
     ); 
    } 

} 

export default HeadingWrapper; 

有点清楚这一点将不胜感激！谢谢:)

Answer 1

styled.h1`...`（例如）返回一个React组件，它的工作原理与<h1>一样。换句话说，你用<h1>这样的：

<h1>h1's children</h1> 

...所以当你做const Heading = styled.h1`...`;，您将使用<Heading>以同样的方式：

<Heading>Heading's children</Heading> 

如果你想要的行为不同的组件，例如一个使用title prop而不是children，您需要定义这样的组件，并且它需要具有与您已经定义的标题组件不同的名称。

例如：

const styled = window.styled.default; 
 

 
const Heading = styled.h1` 
 
    background: red; 
 
`; 
 

 
const TitleHeading = ({title}) => <Heading>{title}</Heading>; 
 

 
// ...or... 
 

 
class StatefulTitleHeading extends React.Component { 
 
    render() { 
 
    return <Heading>{this.props.title}</Heading>; 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <div> 
 
    <Heading>I'm Heading</Heading> 
 
    <TitleHeading title="I'm TitleHeading"/> 
 
    <StatefulTitleHeading title="I'm StatefulTitleHeading"/> 
 
    </div>, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<script src="https://unpkg.com/styled-components@1.4.3/dist/styled-components.js"></script> 
 
<div id="container"></div>

坦率地说，虽然，它更有意义的styled.h1直接只使用组件returend：

const Heading = styled.h1`...`; 
export default Heading; 

// ...then... 

<Heading>Children go here</Heading> 

孩子的语义已经很清楚，并且使用<Heading title="Children go here"/>而不是那个。

Answer 2

让我对你做这件事很简单。

让我们创建一个样式的组件为标题命名为“标题”

const Heading = styled.h1` 
    color: 'black'; 
    font-size: 2rem; 
` 

，现在你可以使用它像以下。

<Heading>{this.props.title}</Heading> 

如何获得标题道具，因为它是儿童，而不是风格元件的问题。它只管理标题的外观。风格化组件不是维护您的应用程序/业务逻辑的容器。

现在我们来看一个完整的例子。

import styled from 'styled-components' 

// Heading.js (Your styled component) 

const Heading = styled.h1` 
    color: 'black'; 
    font-size: 2rem; 
` 
export default Heading 

，现在你的容器会使用你的风格的组件

// Header.jsx (Your container) 
class Header extends Component { 

    componentWillReceiveProps(nextProps) { 
    // This your title that you receive as props 
    console.log(nextProps.title) 
    } 

    render() { 
    const { title } = this.props 
    return (
     <div id="wrapper"> 
     <Heading>{title}</Heading> 
     </div> 
    ) 
    } 
} 

我希望帮助。让我知道你是否需要进一步澄清。