代码之家 › 专栏 › 技术社区 › Chaoming Li

如何合并状态和道具以控制React中警报的可见性

react-state react-props reactjs

Chaoming Li · 技术社区 · 5 年前

我有一个默认不可见的警报组件,当父组件中发生某些事情(例如单击)时,警报组件将可见。在警报组件中,有一个“关闭”按钮可使组件再次不可见。我是新来的反应,我发现它很难实现。

以下是我目前的解决方案:

警报组件:

import React, {useEffect, useState} from "react";

const Alert = ({show, style, message}) => {

    const [visibility, setVisibility] = useState(show);

    useEffect(() => {
        setVisibility(show);
    },[show]);

    return (
        <>
        {(visibility)?(
            <div className="col">
              <div className={"alert shadow alert-"+style} role="alert">
                {message}
                <button type="button" className="close" aria-label="Close" onClick={(e) => {
                  setVisibility(false);
                }}>
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            </div>
        ):(<></>)}
        </>
    );


}

export default Alert;

父组件有一个状态来管理它。

const [alert, setAlert] = useState({
    'show': false,
    'style':'',
    'message':''
  });

<Alert show={alert.show} style={alert.style} message={alert.message} />
<button onClick={(e) => {

  setAlert({
    'show':false, 
    'style':'',
    'message':''
  });
  setAlert({
    'show':true, 
    'style':'success',
    'message':'Thank you!'
  });
}>
  show
</button>

问题是因为道具 show 当我单击父组件中的按钮时,单击警报组件中的“关闭”按钮不会更改 显示 仍然 true 所以它不会呈现警报组件。我使用的解决方法是设置警报道具 显示 在设置为之前设置为false 真的 再一次。这不是很整洁。有没有更好的方法结合道具和状态来决定警报的可见性?

1 回复 | 直到 5 年前

ravibagul91 5 年前

您需要定义一个函数来隐藏 Alert 在父组件本身中,并将其传递给子组件。

const hideAlert = () => {
   setAlert(prevState => ({
     ...prevState,
     show: !prevState.show
   }))
}

然后你可以把这个传给 警觉的 组件,

<Alert show={alert.show} style={alert.style} message={alert.message} hideAlert={hideAlert}/>

在警报组件中,无需再次将道具存储到该状态。你应该直接用道具,

const Alert = ({show, style, message, hideAlert}) => {
  return (
    <>
      { show ? <div className="col">  //directly use props here to show alert
          <div className={"alert shadow alert-"+style} role="alert">
            {message}
            <button type="button" className="close" aria-label="Close" onClick={hideAlert}>
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        </div>
        : 
        <></>
      }
    </>
  );
}

Demo