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

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 一起使用。 IE。我在哪里定义我的类、我的构造函数、设置我的状态等等。

我是否必须将样式化组件移动到它自己的文件中，即：

import styled from 'styled-components';

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

export default Heading;

然后创建一个 React 组件，该组件将用作各种包装器，例如“标题包装器”：

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`...`（例如）返回一个与<h1> 一样工作的 React 组件。换句话说，你像这样使用<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 的组件返回更有意义：

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

// ...then...

<Heading>Children go here</Heading>

children 的语义已经很清楚了，使用<Heading title="Children go here"/> 会显着降低这一点。

Answer 2

让我为你做一个非常简单的事情。

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

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

现在你可以像下面这样使用它了。

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

您如何设法获得作为子项的 title 道具与样式组件无关。它只管理该标题的外观。样式化组件不是维护您的应用/业务逻辑的容器。

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

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

我希望这会有所帮助。如果您需要进一步说明，请告诉我。