Reactjs 在React中切换模态

我有一个父容器，它有两个子组件。当用户单击

onClick={props.toggleReviewForm}

时，函数

toggleReviewForm () {
   this.setState(prevState => ({
     reviewFormActive: !prevState.reviewFormActive,
     displayNameModalActive: !prevState.displayNameModalActive
    }))
}

将reviewForm状态切换为可见。它的可见性是在子组件中用

reviewformative={reviewformative}

设置的，父组件在构造函数中设置了`this.state={reviewformative:false}。我路过

displayNameModalActive={displayNameModalActive}

输入模态的子组件，但获取错误

未捕获类型错误：无法读取DisplayNameModal处未定义的属性'displayNameModalActive'。呈现

父容器

 class ReviewsContainer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      reviewFormActive: false,
      displayNameModalActive: false
    }
    this.config = this.props.config
    this.toggleReviewForm = this.toggleReviewForm.bind(this)
  }

  toggleReviewForm () {
    this.setState(prevState => ({
      reviewFormActive: !prevState.reviewFormActive,
      displayNameModalActive: !prevState.displayNameModalActive
    }))
  }

  render () {
    const {
      reviewFormActive,
      displayNameModalActive
    } = this.state

    return (
      <div className='reviews-container'>
        <ReviewForm
          config={this.config}
          reviewFormActive={reviewFormActive}
          toggleReviewForm={this.toggleReviewForm}
        />

        {this.state.displayName &&
          <div className='modal-container'>
            <DisplayNameModal
              bgImgUrl={this.props.imageUrl('displaynamebg.png', 'w_1800')}
              config={this.config}
              displayNameModalActive={displayNameModalActive}
              displayName={this.state.displayName}
              email={this.state.email} />
          </div>
        }
      </div>
    )
  }
}

export default ReviewsContainer

class ReviewContainer扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
评论形式：false，
displayNameModalActive:false
}
this.config=this.props.config
this.toggleReviewForm=this.toggleReviewForm.bind（this）
}
切换ReviewForm（）{
this.setState（prevState=>({
ReviewFormative:！prevState.ReviewFormative，
displayNameModalActive:！prevState.displayNameModalActive
}))
}
渲染（）{
常数{
回顾形式活动，
displayNameModalActive
}=这个州
返回(
{this.state.displayName&&
}
)
}
}
导出默认的ReviewContainer

子组件（模态）

class DisplayNameModal扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
displayName:this.props.displayName，
电子邮件：this.props.email.split（'@'）[0]
}
}
渲染（道具）{
const{contentStrings}=this.props.config
返回(
//应该只允许模式显示用户名是否与电子邮件相同，或者没有可用的用户名
{props.displayNameModalActive&&this.state.displayName===this.state.email | | |！this.state.displayName&&
{contentStrings.displayNameModal.heading}
{contentStrings.displayNameModal.subHeading}

{contentStrings.displayNameModal.button}
{contentStrings.displaynamemodel.cancel}
}
)
}
}
导出默认DisplayNameModal

这是为什么：

props.displayNameModalActive

而不是这个：

this.props.displayNameModalActive

?

---

如果我错了，请纠正我，但是

render

没有将

props

作为参数。

啊，是的。这会处理错误，但是模式覆盖会在页面加载时显示（并且不允许用户触发它），但是模式本身不会呈现给DOM。它呈现

this.props.displayNameModalActive