Wie arbeite ich mit gestylten Komponenten in meiner Reactive-App?

Question

Ich hatte Probleme, diese Frage zu benennen und es scheint ziemlich breit, also, vergib mir oh Moderatoren. Ich probiere styled components zum ersten Mal aus und versuche es in meine react App zu integrieren. Ich habe nach dem bisher:

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; 

Also, nur eine normale Klasse, aber dann importiere ich styled components bis oben, definieren die const Heading, wo ich angeben, dass ein Heading wirklich nur ein Stil h1 ist. Aber ich bekomme eine Fehlermeldung, dass Heading eine doppelte Erklärung ist, da ich auch class Heading... sage.

Ich vermisse hier offensichtlich etwas völlig. Alle Beispiele online zeigen nicht, wie Sie dies auch mit React verwenden. I.e. wo definiere ich meine Klasse, mein Konstruktor gesetzt mein Zustand usw.

Muss ich den Stil Komponente in seiner eigenen Datei bewegen, das heißt:

import styled from 'styled-components'; 

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

export default Heading; 

Dann erstellen Sie eine Komponente reagieren, die dienen als eine Art Wrapper, z "HeadingWrapper":

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

class HeadingWrapper extends React.Component { 

    render() { 

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

} 

export default HeadingWrapper; 

Ein bisschen Klarheit darüber würde sehr geschätzt werden! Danke :)

Answer 1

styled.h1`...` (zum Beispiel) gibt eine React-Komponente zurück, die genau wie <h1> funktioniert. Mit anderen Worten, verwenden Sie <h1> wie folgt aus:

<h1>h1's children</h1> 

... also, wenn Sie const Heading = styled.h1`...`; tun, werden Sie <Heading> die gleiche Art und Weise verwenden:

<Heading>Heading's children</Heading> 

Wenn Sie eine Komponente möchten, die anders verhält , z.B eine, die die title Requisite anstelle von children verwendet, müssen Sie eine solche Komponente definieren, und es muss einen anderen Namen als die Überschrift haben, die Sie bereits definiert haben.

Zum Beispiel:

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>

Ehrlich gesagt, aber es macht mehr Sinn von styled.h1 die Komponente returend nur direkt zu verwenden:

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

// ...then... 

<Heading>Children go here</Heading> 

Die Semantik von Kindern bereits klar, und die Verwendung <Heading title="Children go here"/> stattdessen deutlich davon ablenkt.

Answer 2

Lassen Sie mich das wirklich einfach für Sie machen.

Lassen Sie uns einen Stil Komponente erstellen für die Rubrik namens

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

‚Überschrift‘ und jetzt können Sie es wie folgt verwenden.

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

Wie Sie es schaffen, die Titelrequisite zu bekommen, da es ein Kind ist, ist keine Angelegenheit der Stilkomponente. Es verwaltet nur, wie dieser Titel aussieht. Die gestylte Komponente ist kein Container, der Ihre App/Geschäftslogik verwaltet.

Schauen wir uns nun ein Beispiel in seiner Gesamtheit an.

import styled from 'styled-components' 

// Heading.js (Your styled component) 

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

und jetzt Ihre Container, der Ihre gestylten Komponente verwenden

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

Ich hoffe, das hilft. Lassen Sie es mich wissen, wenn Sie weitere Erläuterungen benötigen.