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>