如何在我的反應應用程序中使用樣式化組件？

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

我希望幫助。讓我知道你是否需要進一步澄清。