How to work with stylized components in my application?

Question

I am having problems with this question, and it seems pretty broad, so forgive me moderators. I first tried stylized components and tried to integrate it into my response application. I have the following:

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;

So, just a regular class, but then I import styled componentsat the top, determine const Headingwhere I point out, which is Headingreally just stylized h1. But I get an error message indicating what Headingis a duplicate ad, as I also say 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;

! :)

Answer 1

styled.h1`...` () React, , <h1>. , <h1> :

<h1>h1 children</h1>

... , const Heading = styled.h1`...`;, <Heading> :

<Heading>Heading children</Heading>

, -, , , title prop children, , , Heading, .

:

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>

Hide result

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

, . , .