如何在步进器的末端打开一个新的反应组件

Question

当我到达步进器组件的末尾时，如何打开与步进器解耦的单独组件？

这是我的react功能组件的一部分，它控制向前导航。当我到达"完成"按钮时，我希望组件打开：

<ButtonContainer>
{activeStep !== 0 && (
<PrevButton onClick={handleBack}>Back</PrevButton>
)}
<NextButton
variant="contained"
color="primary"
onClick={handleNext}
>
{stepList && activeStep === stepList.length - 1
? 'Done'
: 'Next'}
</NextButton>
</ButtonContainer>

这是我在handleNext函数中要做的事情，还是我要为此创建一个单独的函数？提前谢谢。

Answer 1

要打开一个解耦的组件，可以使用Portal:

门户提供了一种一流的方法，可以将子级渲染到父组件的DOM层次结构之外的DOM节点中。

您需要做的是在根div(<div id="root" />(旁边的某个位置添加另一个<div id="my-comp"/>。在此div中，门户将被渲染，而不是像根div的后代那样正常。门户组件必须从其render()函数返回类似的内容：

render() {  
return ReactDOM.createPortal(  
this.props.children,  
myNode,  
);  
}

第一个自变量(this.props.children(是组件，它可以是element、string或fragment，第二个自变量(myNode(是DOM元素。

然后，您可以在react功能组件中导入Portal组件，并将其放置在其中的某个位置。但由于门户的存在，它不会被呈现为该组件的子级。

看看这个代码笔的例子。

关于已完成的button。创建一个新函数并在onClick道具中使用三元条件，或者在handleNext中添加一个if。