Detailed example of React passing the class name to the child component through the parent component

React is a JAVASCRIPT library for building user interfaces. This article mainly introduces the method of React passing the class name to the child component through the parent component. Friends who need it can refer to it. I hope it can help everyone have a better grasp.

React Tutorial

React is a JAVASCRIPT library for building user interfaces.
React is mainly used to build UI. Many people think that React is the V (view) in MVC.
React originated as an internal project at Facebook, used to build the Instagram website, and was open sourced in May 2013.
React has high performance and very simple code logic. More and more people have begun to pay attention to and use it.

Features of React

1. Declarative design −React adopts a declarative paradigm, which can easily describe applications.
2. Efficiency −React minimizes interaction with the DOM by simulating the DOM.
3. Flexible −React works well with known libraries or frameworks.
4.JSX − JSX is an extension of JavaScript syntax. JSX is not required for React development, but it is recommended.
5. Components − Building components through React makes it easier to reuse code and can be well applied in the development of large projects.
6. One-way response data flow − React implements one-way response data flow, thereby reducing duplicate code, which is why it is simpler than traditional data binding.

1. Method of passing class names to child components through parent components (Line 19)

2. Apply certain class names through different status values ​​(Line 22)

 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}
       <p 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>
         })}
       </p>
     </h3>
    )
  }
}
export default PageTitle;

After reading this article, you should have a deeper grasp of React knowledge.

Related recommendations:

Detailed explanation of React controlled components and uncontrolled components

What are the ways to write components in React

How to implement single-select, multiple-select and reverse-select in forms in ReactJS

The above is the detailed content of Detailed example of React passing the class name to the child component through the parent component. For more information, please follow other related articles on the PHP Chinese website!