React类组件中使用styled-components无法读取props问题咨询

嘿，我一眼就瞅出问题所在啦！你的Title类组件在渲染StyledTitle的时候，只传递了children，没把其他接收到的props（比如primary）传下去，这就导致StyledTitle根本拿不到这些属性，自然没法根据props.primary来切换颜色啦。

怎么修复？ #

有两种简单的解决方式，看你需求选：

方法1：展开所有props（推荐）

用ES6的展开运算符...把Title组件接收到的所有props一股脑传给StyledTitle，这样不管是primary还是以后新增的其他props，都能被正常读取：

const StyledTitle = styled.h1`
  color: ${props => (props.primary ? "royalblue" : "black")};
`;

class Title extends Component {
  render() {
    return <StyledTitle {...this.props}>{this.props.children}</StyledTitle>;
  }
}

const App = () => (
  <div>
    <Title>Hi, Alice!</Title>
    <Title primary>Hi Bob, you are awesome!</Title>
  </div>
);

方法2：单独传递特定props

如果你确定只需要传递某个特定props（比如只有primary），也可以手动单独传递：

class Title extends Component {
  render() {
    return <StyledTitle primary={this.props.primary}>{this.props.children}</StyledTitle>;
  }
}

不过这种方式灵活性差，以后加新props还要手动修改，所以更推荐第一种展开的方式。

修改完之后，你再试试<Title primary>这个组件，就能看到它的文字变成royalblue啦！

其实函数组件很少碰到这个问题，因为函数组件会直接把props传递给内部的styled组件，但类组件一定要记得把需要的props传递给内部的styled元素哦～

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