时间戳

首页 > 解决方案 > goBack 函数反应

javascript - goBack 函数反应

问题描述

因此，当我按下箭头返回图标时，我想要 goBack 函数“无法读取未定义的属性”，它会返回到 MainSettings COMPONENT

Parent component

const MainSettings=()=> {
const [isSystemOpen, setIsSystemOpen]= React.useState(false)
const {goBack} = this.props.navigation;


  
    function openSystem(){
        setIsSystemOpen(true)
      }
      function closeSystem(){
        setIsSystemOpen(false)
      }


 return (
        <div className="mainSettings">


<ComputerIcon onClick={openSystem} />
                {isSystemOpen ? <System closeSystem={closeSystem} />: null}
</div>






Child Component

const System =(props)=> {

  
    
    return (
        <div className='mainSystem'>
            <ArrowBackIcon className='arrow'onClick={this.props.navigation.goBack()}

标签： javascriptreactjs

解决方案

您的代码有几个问题。

您正在使用this功能组件。不需要this在函数组件中使用，所以props在你想达到的时候使用。

例如，在您的MainSettings组件中，您正在尝试获取您不应该props使用的组件this.props.navigation。您可以通过以下方式获得它：

const MainSettings = (props) => ...

然后像这样使用：

const { goBack } = props.navigation;

您没有goBack作为道具传递给您的子组件。所以，你应该这样做：

<System closeSystem={closeSystem} goBack={goBack} />

您不应该goBack在onClick处理程序上调用您的函数。您可以使用参考：

<ArrowBackIcon className='arrow' onClick={props.navigation.goBack}

推荐阅读