用react 构建电子表格（4）--react.js，动态改变css样式

wh_xia_jun

已于 2023-02-20 09:37:37 修改

阅读量689

点赞数 1

分类专栏： react 文章标签： reactjs css

于 2020-11-28 21:39:17 首次发布

本文链接：https://blog.csdn.net/wh_xia_jun/article/details/110129721

版权

react 专栏收录该内容

15 篇文章 3 订阅

订阅专栏

单元格内如如何描述呢：内容可能是文本，有可能是公式，我们先考虑文本情况：

export default class CommData extends Component {
    constructor(props) {
        super(props)
        this.state = {
            text:"",  //文本
            dataType:"",
            note:""
        }
    }
    render() {
        return (
            this.state.text
        )
    }
}

整个数据流转方向还是从table到cell,不过，cell组件相应修改：

.....
    getCommData(text) {
        return <CommData  text={text}/>;
    }
.......   
 render() {
       return (
            <td  className="ttd"
                 onClick={() => this.clicked()}
                 onDoubleClick={e => this.doubleClicked(e)}
            >
                {this.getCommData(this.state.commData)}
            </td>
        )
    }

样式内容比较多，目前只考虑对齐、字体、边框

字体：目前涉及如下属性：

风格（CellFontStyle）：宋体、仿宋等

字号(CellFontSize):字体大小

字体序号（cellFont）:粗体、斜体、下划线三类

边框:分4边控制，简化一下，每边就s

react当中，动态改变css样式

以斜体、正常为例

1、定义css样式文件样式

2、render中定义对应的变量

3.td 元素根据对应的变量，加载适当的样式

4、样式变量的值如何来，当然来自state中的数据，

5、根据state当中的值，动态修改变量的值

也可以说：1state接受样式数据，2）render中定义变量，表示用什么样式classname,3)根据传入的值，动态改变变量4）td上挂上代表classname的变量 5）当然，必须有配套的css

1定义css样式

.cell_font-style_normal{
    font-style:normal;
}
.cell_font-style_italic{
    font-style:italic;
}

2、定义对应变量

    render() {
        ......
       let cell_font_style_css= 'font-sytle_normal'

3.td 元素根据对应的变量，加载适当的样式

        return (
            <td  className="ttd"
                 onClick={() => this.clicked()}
                 onDoubleClick={e => this.doubleClicked(e)}
                 className={["ttd", alignCss,cell_font_family_css,cell_font_size_css,
                     cell_font_weight_css, cell_font_style_css].join(' ')}
            >
                {this.getCommData(this.state.commData)}
            </td>
        )

4、样式数据来源是state当中

5、根据state当中的值，动态修改变量的值。

        switch(this.state.cell_font_css[3]){
            case 'font-sytle_normal':
                cell_font_style_css='cell_font-style_normal'
                break;
            case 'font-sytle_bold':
                cell_font_style_css='cell_font-style_italic'
                break;
            default:
                cell_font_style_css='cell_font-style_normal'
        }