目标：实现一个Toast消息模式（使用功能组件），该模式将根据ToastModal组件返回中的道具值（props.showToastModal）显示或隐藏

期望：使用道具。直接显示Toast模式将决定是否显示Toast

实际：模式不出现基于props.showToastModal

代码如下：父组件

class Datasets extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showToastModal: false,
      toastModalText: ''
    }
  }

 toggleOff = () => {
    this.setState({ showToastModal: false, toastModalText: '' })
  }

 render() {
   {this.state.showToastModal && (
          <ToastModal
            showToastModal={this.state.showToastModal}
            toastModalText={this.state.toastModalText}
            toggleOff={this.toggleOff}
          />
   )}
 }
}

子组件：此项工作：

const ToastModal = (props) => {

  const isOpen = props.showToastModal

  return (
    <div className={`${css.feedbackModal} ${isOpen ? css.show : css.hide}`}>
      {props.toastModalText}
      <i
        className={`bx bx-x`}
        onClick={() => props.toggleOff()}
      />
    </div>
  )
}

export default ToastModal

但这并不（直接使用道具值）：

const ToastModal = (props) => {

  return (
    <div className={`${css.feedbackModal} ${props.showToastModal ? css.show : css.hide}`}>
      {props.toastModalText}
      <i
        className={`bx bx-x`}
        onClick={() => props.toggleOff()}
      />
    </div>
  )
}

export default ToastModal

使用常量等参线=道具。showToastModal按预期工作。我不明白为什么会这样。这是一个React生命周期问题，还是使用可能在渲染期间更新的道具值是一种不好的做法？