javascript - 我可以更改位于反应组件中的 div 的不透明度状态吗？

问题描述

我正在尝试分离我的组件和容器代码。

我知道handleHide()当 Main.js 中的“隐藏”按钮被按下时 MainContainer 中的函数被调用，因为Alert位于函数中的handleHide()函数有效。

所以基本上这是一个问题，如果不能通过道具改变不透明度，或者我错过了什么。

下面是我的 Main.js 文件（组件）

import React from 'react'

const styles = {
  transition: 'all 1s ease-out'
}

export class Main extends React.Component {
  render () {
    return (
      <div>
        <nav>
          <div className='nav-wrapper'>
            <a href='/' className='brand-logo'>Todays&rsquo; EDM</a>
            <ul id='nav-mobile' className='right hide-on-med-and-down'>
              <li><a href='sass.html'>Music</a></li>
              <li><a href='badges.html'>Playlists</a></li>
              <li><a href='collapsible.html'>News</a></li>
            </ul>
          </div>
        </nav>

        <div className='container'>
          <div className='row'>
            <div className='s12' />
          </div>

          <div className='row'>
            <div className='s8 offset-s2 center-align'>
              <div className='card green accent-4 z-depth-2'
                style={{...styles, opacity: this.props.opacity, transform: 'scale(' + this.props.scale + ')'}}>
                <div className='card-content white-text'>
                  <span className='card-title'>Title</span>
                </div>

                <div className='card-action'>
                  <a onClick={this.props.hide}>HIDE</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

这是我的 MainContainer.js 文件（容器）

import React from 'react'
import { Main } from '../components/Main'

export class MainContainer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      opacity: 1,
      scale: 1
    }

    this.handleHide = this.handleHide.bind(this)
    this.handleScale = this.handleScale.bind(this)
  }

  handleHide () {
    this.setState({
      opacity: 0
    })
    alert('Goodbye world')
  }

  handleScale () {
    this.setState({
      scale: this.state.scale > 1 ? 1 : 1.2
    })
  }

  render () {
    let hide = this.handleHide
    return (
      <Main hide={hide} />
    )
  }
}

标签： javascriptreactjscomponentscontainers

javascript - 我可以更改位于反应组件中的 div 的不透明度状态吗？

问题描述

解决方案

推荐阅读