代码之家 › 专栏 › 技术社区 › user2024080

具有钩子功能的显示-隐藏组件只能工作一次

tsx react-functional-component react-hooks reactjs

user2024080 · 技术社区 · 4 年前

我试图显示和隐藏一个功能组件,它的工作原理只适用于加载。隐藏之后就再也不会出现了。我理解,我使用的方式 functional component 以错误的方式。

有人建议我走正确的路吗?

这是我的代码:(index.tsx)

import React, { Component, useState } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {
  const [isBoolean, setBoolean] = useState(false);

  const showComponent = () => {
    setBoolean(true);
  };

  return (
    <div>
      <Hello isBoolean={isBoolean} />
      <p>Start editing to see some magic happen :)</p>
      <button onClick={showComponent}>Show hello component</button>
    </div>
  );
};

render(<App />, document.getElementById('root'));

Hello组件:

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

export default ({ isBoolean }: { isBoolean: boolean }) => {
  const [isShow, setIsShow] = useState(false);

  useEffect(() => {
    setIsShow(isBoolean);
  }, [isBoolean, setIsShow]);

  const shufler = () => {
    setIsShow(false);
  };

  if (!isShow) {
    return null;
  }

  return (
    <div>
      <p>hi {JSON.stringify(isShow)}</p>
      <button onClick={shufler}>Hide Component</button>
    </div>
  );
};

Live Demo

2 回复 | 直到 4 年前

Giorgi Moniava 4 年前

要解释代码不起作用的原因,请执行以下操作:

useEffect(() => {
    setIsShow(isBoolean);
}, [isBoolean, setIsShow]);

最初设置时 isBoolean 在父对象中为true,这 useEffect 在儿童跑步中
然后你设置 isShow 从子组件为false
然后你再次设置 isBoolean 在父组件中为true,但对于 使用效果 上面 isBoolean 现在是真的,在以前的渲染中也是真的,所以它不再运行。

因此,如果可能,无需重复 isBoolean 同样在child中陈述,只需将其作为道具传递并直接使用,就像在另一个答案中一样。

Shan 4 年前

无需维护子组件中道具的派生状态( 你好 ),可以将回调和状态作为道具从父组件传递( 指数 )孩子。

问题原因:

隐藏组件后 isShow 设置为false, isBoolean 仍然是真的。所以下次当我们点击显示按钮时 isBoolean 没有改变,这仍然是真的,不会触发 使用效果 在中 Hello.tsx , isShow 从未设置为true,这会导致子级返回null。

index.tsx

import React, { Component, useState } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

const App = () => {
  const [isBoolean, setBoolean] = useState(false);

  const showComponent = () => {
    setBoolean(true);
  };

  const hideComponent = () => {
    setBoolean(false);
  }



  return (
    <div>
      <Hello isBoolean={isBoolean} hideComponent={hideComponent} />
      <p>Start editing to see some magic happen :)</p>
      <button onClick={showComponent}>Show hello component</button>
    </div>
  );
};

render(<App />, document.getElementById('root'));

Hello.tsx

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

export default ({ isBoolean, hideComponent }: { isBoolean: boolean }) => {
  if (!isBoolean) {
    return null;
  }

  return (
    <div>
      <p>hi {JSON.stringify(isBoolean)}</p>
      <button onClick={hideComponent}>Hide Component</button>
    </div>
  );
};