6

我在命名这个问题时遇到了麻烦，而且它似乎很广泛，所以，请原谅我哦版主。我第一次尝试样式化组件并尝试将其集成到我的反应应用程序中。到目前为止，我有以下内容：

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，我指定 aHeading真的只是一个样式化的h1。但是我收到一个错误，指出这Heading是一个重复的声明，因为我也说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;

对此有一点澄清将不胜感激！谢谢 ：）

4

2 回答 2

6

styled.h1`...`（例如）返回一个像<h1>. 换句话说，您可以<h1>这样使用：

<h1>h1's children</h1>

...所以当你这样做时const Heading = styled.h1`...`;，你将使用<Heading>相同的方式：

<Heading>Heading's children</Heading>

如果您想要一个行为不同的组件，例如使用titleprop 而不是 的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>

不过，坦率地说，styled.h1直接使用组件返回更有意义：

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

// ...then...

<Heading>Children go here</Heading>

儿童的语义已经很清楚了，而使用<Heading title="Children go here"/>反而会显着减损这一点。

于 2017-02-21T18:01:45.453 回答
4

让我为你做这件事真的很简单。

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

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

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

于 2017-06-13T10:41:45.377 回答