Javascript reactjs+；有状态组件的样式化组件-我的样式可以'；我看不到道具

为什么在使用类/有状态组件时看不到道具：

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

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

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

const StyledTitle=styled.h1`
颜色：${props=>（props.primary？“皇家蓝”：“黑色”）}；
`;
类标题扩展组件{
render（）{
返回{
这是道具
}；
}
}
常量应用=（）=>（
嗨，爱丽丝！
嗨，鲍勃，你真棒！
);

以下是样式化组件的示例：

---

演示：

您没有将

primary

属性传递给样式化组件，因此它可以根据

primary

属性呈现逻辑。只需将其添加到组件声明中

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

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

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

const StyledTitle=styled.h1`
颜色：${props=>（props.primary？“皇家蓝”：“黑色”）}；
`;
类标题扩展组件{
render（）{
返回{
这是道具
}；
}
}
常量应用=（）=>（
嗨，爱丽丝！
嗨，鲍勃，你真棒！
);

您没有将

primary

属性传递给样式化组件，因此它可以根据

primary

属性呈现逻辑。只需将其添加到组件声明中

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

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

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

const StyledTitle=styled.h1`
颜色：${props=>（props.primary？“皇家蓝”：“黑色”）}；
`;
类标题扩展组件{
render（）{
返回{
这是道具
}；
}
}
常量应用=（）=>（
嗨，爱丽丝！
嗨，鲍勃，你真棒！
);