Как работать со стилизованными компонентами в моем приложении?

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>

Честно говоря, хотя, это имеет смысл использовать только компонент returend по styled.h1 непосредственно:

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

Я надеюсь, что помогает. Дайте мне знать, если вам нужно уточнить.