Question

我有一个父容器，它有几个子组件。当用户点击onClick={props.toggleReviewForm}时，功能

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

将reviewForm状态切换为可见状态。它的可见性在子组件中设置为reviewFormActive={reviewFormActive}，父组件在构造函数中设置了`this.state = {reviewFormActive：false}。我正在通过

displayNameModalActive={displayNameModalActive}

进入模态的子组件，但得到错误

Uncaught TypeError: Cannot read property 'displayNameModalActive' of undefined at DisplayNameModal.render

父容器

 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 DisplayNameModal extends React.Component {
  constructor (props){
    super(props)
    this.state = {
      displayName: this.props.displayName,
      email: this.props.email.split('@')[0]
    }
  }

  render (props) {
    const {contentStrings} = this.props.config

    return (
      <div>
      //Should only allow the modal to show if the username is the same as the email or there is no username available
      { props.displayNameModalActive && this.state.displayName === this.state.email || !this.state.displayName && 
      <div className='display-name-container' style={{ backgroundImage: `url(${this.props.bgImgUrl})` }}>
        <div className='display-name-content'>
          <h2 className='heading'>{contentStrings.displayNameModal.heading}</h2>
          <p>{contentStrings.displayNameModal.subHeading}</p>
          <input type="text"
             defaultValue={this.state.displayName}
             placeholder={this.state.displayName}
             minLength="3"
             maxLength="15"/>
          <button
            onClick={this.updateDisplayName}
            className='btn btn--primary btn--md'>
            <span>{contentStrings.displayNameModal.button}</span>
          </button>
          <p className='cancel'>{contentStrings.displayNameModal.cancel}</p>
        </div>
      </div>
    }
    </div>
    )
  }
}

export default DisplayNameModal

Answer 1

为什么这样：

props.displayNameModalActive

而不是这个：

this.props.displayNameModalActive

如果我错了，请纠正我，但render没有props作为参数。

在React中切换模态

1 个答案: