Question

我正在使用React应用程序并使用样式化组件。到目前为止，事情进展顺利，我真的很喜欢它，但我遇到了一些问题，我的样式组件可以像我希望的那样重复使用。

我觉得我的问题的一部分是我还在学习一些关于React和样式组件的内容。

该应用程序是使用react-boilerplate构建的，因此我的组件标记基于他们example关于如何使用样式组件。我也在使用Material UI。

import React from 'react';
import styled from 'styled-components';
import ListSubheader from 'material-ui/List/ListSubheader';

// styles for list subheader
const StyledListSubheade = styled(ListSubheader)`
  && {
    color: #fff;
    font-size: 0.75em;
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 16px 20px;
  }
`;

class ListSubheader extends React.Component {
  render() {
    return (
      <StyledListSubheader>Title</StyledListSubheader>
    );
  }
}

export default ListSubheader;

很简单吧？但是当我想要更改每个组件中StyledListSubheader内的文本时，我该怎么办？如果我要在两个不同的组件中导入ListSubheader并且我希望文本在一个文件中Title和另一个组件中的Example，该怎么办？如何动态更改该文本？

任何帮助表示赞赏！谢谢！

Answer 1

使用ListSubHeader的儿童道具最容易做到这一点：

class ListSubheader extends React.Component {
  render() {
    return (
      <StyledListSubheader>{this.props.children}</StyledListSubheader>
    );
  }
}

您现在可以在其他组件中使用：

<ListSubheader>Whatever you like</ListSubheader>

React app中带有动态文本的样式化组件

1 个答案: