时间戳

首页 > 解决方案 > 通过状态隐藏 React 中的项目

javascript - 通过状态隐藏 React 中的项目

问题描述

所以我想当我按下按钮组件中的按钮时，“li 部分”中的所有内容以及 ImageComponent 中的所有内容都会消失，但它不起作用我想知道我的错误是什么。ButtonComponent 在其他地方呈现。

App Component/Parent

function App({ hideButton }) {

    return (
        <div className="App">
            <ImageComponent hideButton={hideButton} />
        </div>

    );
}


// ButtonComponent

function ButtonComponent() {

    const [hideButton, setHideButton] = React.useState(false)

    function handleClick() {
        setHideButton(true)
    }

    return (
        {
            !hideButton && (
                <li>
                    <img className="image"src="./icons/>
                    <Button  onClick={handleClick}   variant="outlined" className="button__rightpage" >Hide</Button>
                    <caption className="text"> Hide</caption>
                </li >
            )
        }
    )
}




// ImageComponent
const ImageComponent = ({ hideButton }) => {
    return (
        <div>
            {
                !hideButton && (
                    <div>
                        <img src='icons/icon.png' />
                        <caption>Image </caption>
                    </div>
                )
            }
        </div>
    )
}

标签： javascriptreactjs

解决方案

您需要将状态提升到ButtonCommponent和可访问的最父组件ImageComponent。在这种情况下App Component。但是，如果 ButtonComponent 呈现在App Component树下的层次结构之外，则应使用上下文 API。

创建一个上下文并在其上共享状态，它将可以在应用程序级别访问。

//#1. create context.
export const HiddenContext = React.createContext(false);

//#2. create the provider and share the state with it.
function HiddenProvider({ children }) {
  const [hideButton, setHideButton] = React.useState(false);

  function handleClick() {
    setHideButton(true);
  }

  return (
    <HiddenContext.Provider value={{ hideButton, handleClick }}>
      {children}
    </HiddenContext.Provider>
  );
}


//#3. render the provider component to the most top parent component
export default function App() {
  const { hideButton } = React.useContext(HiddenContext);

  return (
    <HiddenProvider>
      <div className="App">
        <ImageComponent hideButton={hideButton} />
        <OtherComponentRenderTheButton />
      </div>
    </HiddenProvider>
  );
}

// other component that render the button
function OtherComponentRenderTheButton() {
  return <ButtonComponent />;
}

//ButtonComponent

function ButtonComponent() {
  const { hideButton, handleClick } = React.useContext(HiddenContext);

  return (
    <React.Fragment>
      {!hideButton && (
        <li>
          <img className="image" src="./icons" alt="" />
          <Button
            onClick={handleClick}
            variant="outlined"
            className="button__rightpage"
          >
            Hide
          </Button>
          <caption className="text"> Hide</caption>
        </li>
      )}
    </React.Fragment>
  );
}

// ImageComponent
const ImageComponent = () => {
  const { hideButton } = React.useContext(HiddenContext);
  return (
    <div>
      {!hideButton && (
        <React.Fragment>
          <img src="icons/icon.png" alt="" />
          <caption>Image </caption>
        </React.Fragment>
      )}
    </div>
  );
};

工作演示

推荐阅读