Javascript 我可以更改位于react组件中的div的不透明度状态吗？

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

我知道当按下Main.js中的按钮“Hide”时，MainContainer中的函数

handleHide（）

被调用，因为

handleHide（）

函数中的

Alert

起作用

所以基本上，这是一个不透明的问题，如果不能通过道具改变，或者我错过了一些东西

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

从“React”导入React
常量样式={
过渡：“所有1放松”
}
导出类Main扩展React.Component{
渲染（）{
返回(





标题
隐藏
)
}
}

这是我的MainContainer.js文件（Container）

从“React”导入React
从“../components/Main”导入{Main}
导出类MainContainer扩展React.Component{
建造师（道具）{
超级（道具）
此.state={
不透明度：1，
比例：1
}
this.handleHide=this.handleHide.bind（this）
this.handleScale=this.handleScale.bind（this）
}
手牛皮（）{
这是我的国家({
不透明度：0
})
警报（“再见世界”）
}
手刻度（）{
这是我的国家({
比例：this.state.scale>1？1:1.2
})
}
渲染（）{
let hide=this.handleHide
返回(
)
}
}

在MainContainer.js中修改代码，如下所示

---

您没有将

此.state.opacity

传递到

。您只传递了

此。隐藏
<代码>道具
不要神奇地传下去，你必须添加你想从
this.props
访问的道具，就像
this.props.hide
一样。
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>
    )
  }
}

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} />
    )
  }
}