React通过父组件传递类名给子组件的方法

最新推荐文章于 2025-04-10 14:08:07 发布

原创最新推荐文章于 2025-04-10 14:08:07 发布 · 4.4k 阅读

CC 4.0 BY-SA版权

文章标签：

12 篇文章

订阅专栏

本文介绍了一种在React中通过父组件向子组件传递类名的方法，以及如何根据不同的状态值来应用特定的类名，实现子组件样式的动态变化。

1.通过父组件传递类名给子组件的方法（第十九行）

2.通过不同的状态值，应用某些类名（第22行）

[javascript]view plain copy 
  

import React from 'react'
import './style.css'
class PageTitle extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
timeType:0
}
}
handleClick(timeType){
this.setState({
timeType:timeType
});
this.props.handle(timeType+1);
}
render() {
const {title,dataList} = this.props;
return (
<h3 className={this.props.clasName+" cp_title"}>{title}
<div className="floatR">
{dataList.map((item,index) => {
return <span key={index} onClick={this.handleClick.bind(this,index)} className={this.state.timeType === index ? "canvasNav canvasNavActive": "canvasNav"}>{item}</span>
})}
</div>
</h3>
)
}
}
export default PageTitle;