Question

目标：实现Toast Message模式（使用功能组件），该模式将在ToastModal组件的返回值内根据props值（props.showToastModal）显示或隐藏

预期：直接使用props.showToastModal将确定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

但这不是（直接使用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 Lifecycle的问题，还是不恰当的做法是使用可在渲染期间更新的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

功能组件无法根据道具值呈现返回值

1 个答案: