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;

然后创建一个React组件，它将作为排序包装，例如＆＃39; HeadingWrapper＆＃39;：

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道具代替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

让我对你说这很简单。

让我们为名为＆＃39; Heading＆＃39;

的标题创建一个样式组件

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

我希望有所帮助。如果您需要进一步澄清，请与我们联系。

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

2 个答案: