React 应用程序中带有动态文本的样式化组件

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 的 children 道具最容易做到这一点：

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

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

<ListSubheader>Whatever you like</ListSubheader>

React 应用程序中带有动态文本的样式化组件

Styled Components in React app with dynamic text

javascript

css

reactjs

styled-components