反应更新儿童道具

Question

我的目标是：单击子组件中的一个按钮，然后删除该组件。

新的反应。在我的app.js中，我在该组件中有一个组件和道具：

<IntroSteps isHidden={false} />

在＆lt; lt; gt;组件中，我有逻辑来聆听ishidden> Ishidden prop

export default function IntroSteps({isHidden}) {
if(isHidden) {
  return null
 }
  return ( <div> content </div> ) 
}

我的目标是我的目标是我的目标是能够在Introsteps组件中更新ISHIDD。我尝试了以下操作，没有运气。正确的方法是什么？

const removeIntroSteps = () => {
isHidden = true
};

Answer 1

在评论中，您已经澄清了：

希望能够单击子组件中的一个按钮并将其从DOM

中删除

的最佳方法是让子组件调用父母通过它通过它的函数，并让父母要么让父母渲染子（而不是隐藏）或不渲染它（隐藏）（或者，或者，使用isHidden flag渲染它，并且儿童组件可以返回null当isHidden是是的，但这似乎是圆形的）。

快速示例：

const { useState } = React;

const Child = ({hide}) => {
    return <div>
        I'm the child <input type="button" onClick={hide} value="Hide Me" />
    </div>;
};

const Example = () => {
    const [childHidden, setChildHidden] = useState(false);
    
    const hideChild = () => setChildHidden(true);

    return <div>
        {childHidden ? null : <Child hide={hideChild} />}
    </div>;
};

ReactDOM.render(<Example />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

当您 can 将状态添加到子组件中，该状态可以使其维护单独的标志（例如，hiddenmyself例如，然后返回null如果> Ishidden 或hiddenmyself是正确的），您无法直接更改Ishidden prop的状态。这是父部件控制的东西，而不是孩子。

Answer 2

道具是不可变的，所以恐怕您可能无法在子女组件中更改它。我宁愿这样做：
在app.js中，

const [isHidden, setIsHidden] = useState[false];
const updateHidden =() =>{
 setIsHidden(!isHidden) //true or false
}
<IntroSteps isHidden={isHidden} updateHidden={updateHidden} />

然后在子组件中，
只需在需要的任何地方调用updateHidden。

Answer 3

props props props of-ofly 不能。

您需要将功能传递给负责更新ISHIND状态的组件。

在内部的内存中，您需要添加此信息：

const toggleIsHidden => setIsHidden(!isHidden);

<IntroSteps isHidden={false} toggleIsHidden={toggleIsHidden} />

然后，在组件中：

export default function IntroSteps({isHidden, toggleIsHidden}) {

// use toggleIsHidden function as you need

if(isHidden) {
  return null
 }
  return ( <div> content </div> ) 
}

Answer 4

为此，您需要将2个道具传递到Introsteps组件中。

isHidden, setIsHidden

当然，这两个变量可以通过usestate在父组件中定义。

代码示例：

export default function ParentComponent() {
  const [isHidden, setIsHidden] = useState(false);
  
  ...
  ...
  
  return (
    <IntroSteps isHidden={isHidden} setIsHidden={setIsHidden} />
  )
}