reac+typescript组件的简单封装

reac+typescript组件的简单封装

这是一个最简单的用来代替h1的组件

props带问号就是可传可不穿，如果没有带问号就是一定要传入该参数，否则就会报错
titleStyle表示该组件的行内样式，titleClass表示该组件的类名

import * as React from 'react';
import classnames from 'classnames';
import * as style from 'app/styles/framework.css';
interface State {
     }
interface Props {
     
  titleStyle?: any;
  titleClass?: any;
}
class ProductTitle extends React.Component<Props, State> {
     
  constructor(props: Props) {
     
    super(props);
    this.state = {
     };
  }
  render() {
     
    let {
      children, titleStyle, titleClass } = this.props;
    return (
      <div>
        <p
          style={
     titleStyle ? titleStyle : {
     }}
          className={
     classnames(style.fontFlow2, titleClass && titleClass)}
        >
          {
     children}
        </p>
      </div>
    );
  }
}
export default ProductTitle;

用react的classnames库方法让react支持多个类名，如果有传过来类名就加上，也可以使用三目运算符来实现默认样式

children就是组件包裹的html结构，类似于vue的槽口slot

在jsx中的使用：

<ProductTitle titleClass={
     style.popularTitle}>{
     name}</ProductTitle>