功能组件无法根据 props 值渲染返回值

Question

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

预期：直接使用 props.showToastModal 将确定 Toast 是否出现

实际：基于props.showToastModal没有出现Modal

代码如下： 父组件

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

但这不是（直接使用 props 值）：

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

使用 const isOpen = props.showToastModal 可以按预期工作。我很困惑为什么会发生这种情况。这是一个 React 生命周期问题，还是使用可能在渲染期间更新的 props 值是不好的做法？

Answer 1

请尝试解构对象

const ToastModal = ({ showToastModal, toggleOff }) => {

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

export default ToastModal