React 父组件传递props到子组件同时控制子组件显示

Guqiancheng

于 2020-10-11 23:18:47 发布

阅读量950

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React学习笔记

本文链接：https://blog.youkuaiyun.com/Guqiancheng/article/details/109019161

React学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个React应用实例，通过父组件的状态控制子组件的显示与隐藏，演示了如何利用React的状态管理和属性传递实现组件间的交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 在父元素中使用state去控制子元素的props，从而达到父元素传递给子元素。
/* eslint-disable*/
import React from 'react';
import ReactDOM from 'react-dom';
import './01props.css'  
class ParentCom extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      isActive : true,
    }
    this.changeShow = this.changeShow.bind(this);
  }
  render(){
      return (
        <div>
          <button onClick={this.changeShow}>控制子元素显示
          </button>
          <ChildCom isActive={this.state.isActive}/>
        </div>
      )
  }
  changeShow(){
    this.setState({
      isActive:!this.state.isActive
    })
  }
}
class ChildCom extends React.Component{
  constructor(props){
    super(props);
  }
  render(){
    let strClass = null;
    if(this.props.isActive){
      strClass = ' active';
    }else{
      strClass = '';
    }
    return (
      <div className={"content"+strClass}>
        <h1>我是子元素</h1>
      </div>
    )
  }
}
ReactDOM.render(<ParentCom></ParentCom>,document.querySelector("#root"));

/* 01props.css */
.content{
    width:400px;
    height:400px;
    background-color: skyblue;
    display: none;
}
.content.active{
    display: block;
}