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

淩亂°似流年 2023-03-01 05:38 106阅读 0赞

**想要达到的目的和结果： 用子组件的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.isShow)
          })
        } else if (color === '#f8dc3e') {
          this.setState({
            color: '#071023',
            isShow: !isShow
          }, () => {
            this.props.getChildrenMsg(this.state.isShow)
          })
        }
      }
      render () {
        return (
          <div>
            <button id='btn' className='Button' onClick={ this.toParent } style={
       { backgroundColor: this.state.color }}> </button>
          </div>
        )
      }
    }
    export default MyButton

.Button{
        width: 54px;
        height: 54px;
        background-image: url('../../../assets/images/mybutton/mybutton.png');
        border: none;
        background-repeat: no-repeat;
        float: left;
        margin-right: 30px;
    //是鼠标放到按钮上，箭头可以变成小手
        cursor: pointer;
    }

2.在所需要控制的子组件的js里写

export default class OnlineTotal extends React.Component {  
    static propTypes = {
        isShow: PropTypes.string
      }
     state={
        isHidden: 'block'
      }
    /**
       * 参数变更触发的周期钩子
       */
      componentWillReceiveProps = (nextProps) => {
        if (nextProps.isShow !== this.isShow) {
          this.isShow = nextProps.isShow
          const { isHidden } = this.state
          this.setState({
            isHidden: (this.isShow === 'false' ? 'none' : 'block')
          }, () => {
            console.log("isHidden", isHidden)
          })
        }
      }
    
    render () {
        const { isHidden } = this.state
        return (
          <div className='OnlineTotal-box' style={
       { display: isHidden }}>
           内容.......
          </div>
        )
      }
    }

3.在index.js（父组件）

export default class Scee extends React.Component {
      /**
       * 初始化state
       */
      state = { isShow: 'true' }
    
    
      getChildrenMsg = (isShow) => {
        this.setState({
          isShow: isShow === true ? "true" : "false"
        })
      }
    
    render () {
        const { isShow } = this.state
        return
            <div className='newscreen-police-condition'>
              <OnlineTotal isShow={ isShow } />
            </div>
      }
    }

自己的总结，当然还有更好地方法，欢迎一起研究