react--button组件控制其他组件显示和隐藏1

最新推荐文章于 2022-12-09 15:21:56 发布

ABU_MOlI_ITUI

最新推荐文章于 2022-12-09 15:21:56 发布

阅读量7k

点赞数

分类专栏： react 文章标签： react + js

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/107509809

版权

这篇博客探讨了如何在React中通过Button组件来控制其他组件的显示和隐藏。作者详细介绍了步骤，包括创建子组件MyButton.js和MyButton.less，然后在目标子组件的js中处理逻辑，并在index.js（父组件）中完成整合。文章最后鼓励读者分享更多实现此功能的方法。

摘要由CSDN通过智能技术生成

想要达到的目的和结果：用子组件的button按钮控制其他子组件的显示和隐藏

1.创建子组件的js（MyButton.js）和less （MyButton.less）

import React, { Component } from 'react'
import './MyButton.less'
import PropTypes from 'prop-types'

class MyButton extends Component {
//对Component设置propTypes属性，可以为Component的props属性进行类型检查。
  static propTypes = {
    getChildrenMsg: PropTypes.func
  }
//可以获取到父组件传下来的参数。只要组件存在constructor,就必要要写super,否则this指向会错误。
  constructor (props) {
    super(props)
    this.state = {
      isShow: true,
      color: '#071023'
    }
  }
//可以控制显示和隐藏、点击有变化的方法
  toParent = () => {
    const { isShow, color } = this.state
    if (color === '#071023') {
      this.setState({
        color: '#f8dc3e',
        isShow: !isShow
      }, () => {
        this.props.getChildrenMsg(this.state.isS