我的目标：单击子组件中的按钮并删除该组件。
React 新手。在我的 app.js 中，我在该组件中有一个组件和一个道具：
<IntroSteps isHidden={false} />
在<IntroSteps>组件中，我有逻辑来监听isHiddenProp
export default function IntroSteps({isHidden}) {
if(isHidden) {
return null
}
return ( <div> content </div> )
}
我的目标是能够在 IntroSteps 组件中更新 isHidden。我没有运气尝试了以下操作。这样做的正确方法是什么？
const removeIntroSteps = () => {
isHidden = true
};
在评论中你已经澄清：
希望能够单击子组件中的按钮并将其从 dom 中删除
最好的方法是让子组件调用父组件传递给它的函数，并让父组件渲染子组件（不隐藏）或不渲染子组件（隐藏）（或者，使用isHidden标志和子组件可以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>虽然您可以向子组件添加状态，使其维护一个单独的标志（hiddenMyself例如，null如果其中一个isHidden为hiddenMyself真，则返回），但您不能直接更改isHidden道具的状态。那是父组件控制的东西，而不是子组件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句