React项目中Styled Components动态文本与复用问题咨询

嘿，这问题其实很常见，刚接触组件封装的时候容易犯这个小问题——把内容硬编码在组件里啦。要让你的ListSubheader能在不同地方显示不同文本，有两种非常实用的方法，我给你一步步讲：

方法一：利用React的children属性（最常用） #

React组件的children属性就是用来接收父组件传递的子元素的，你可以把它直接放到你的Styled组件里，这样使用的时候想传什么文本就传什么：

修改你的组件代码：

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

// styles for list subheader
const StyledListSubheader = 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() {
    // 这里把硬编码的"Title"换成this.props.children
    return (
      <StyledListSubheader>{this.props.children}</StyledListSubheader>
    );
  }
}

export default ListSubheader;

然后在其他组件里使用的时候，直接把文本作为子元素传入：

// 组件1里用
<ListSubheader>我的自定义标题</ListSubheader>

// 组件2里用
<ListSubheader>Example</ListSubheader>

这种方法的好处是灵活，你甚至可以传递更复杂的内容，比如带图标或者样式的文本，不只是纯字符串。

方法二：自定义title props（适合需要默认值或额外处理的场景） #

如果你的组件只需要传递纯文本，并且想给个默认标题，那可以自定义一个title属性：

修改组件代码：

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

const StyledListSubheader = 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 {
  // 设置默认props，避免没传title的时候显示空
  static defaultProps = {
    title: '默认标题'
  };

  render() {
    // 使用this.props.title来获取传递的文本
    return (
      <StyledListSubheader>{this.props.title}</StyledListSubheader>
    );
  }
}

export default ListSubheader;

使用的时候：

// 用默认标题
<ListSubheader />

// 传自定义标题
<ListSubheader title="Title" />
<ListSubheader title="Example" />

额外小技巧：结合styled-components动态修改样式（可选） #

虽然你现在只问了文本，但顺便提一句——如果之后需要动态修改样式（比如颜色、字体大小），可以利用styled-components的props特性，比如：

const StyledListSubheader = styled(ListSubheader)`
  && {
    color: ${props => props.textColor || '#fff'};
    font-size: ${props => props.fontSize || '0.75em'};
    line-height: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 16px 20px;
  }
`;

然后使用的时候可以同时传文本和样式：

<ListSubheader title="蓝色标题" textColor="#007bff" />

这样你的组件复用性就更高啦！

内容的提问来源于stack exchange，提问作者tripstar