javascript - 链接到 Scroll，TypeError : this. props.parentMethod 不是函数

Question

我试图有一个链接，单击时自动滚动到组件的位置。目前正在工作1 ，尽管链接/滚动成功后会抛出类型错误“TypeError: this.props.parentMethod is not a function”。

我在标题组件中有一组链接，单击链接将跳转到同一页面 (SPA) 上列出的组件。我还尝试在组件之间传递函数，尽管如果没有此代码的一部分，链接 + 滚动将无法运行 2 .

这是我当前拥有的布局，不确定是什么导致了此类型错误。我目前只是想建立/About work 的链接。

App.jsx:

import React, { Component } from 'react';
import { Route, Switch, BrowserRouter as Router} from 'react-router-dom';

import Header from './components/Header.jsx'
import Footer from './components/Footer.jsx'
import Main from './components/Main.jsx'
import About from './components/About.jsx'
import Content from './components/Content.jsx'
import Portfolio from './components/Portfolio.jsx'

import './assets/styles.css';

class App extends Component {
    constructor (props){
        super(props);
        console.log("app");
    }

    render() {
        return (
            <Router>
                <div className="Global">
                    <div className="BG-1">
                        <div className="Header"><Header/></div>
                        <div className="Main"><Main /></div>
                        <div className="About"><About/></div>
                    </div>

                    <div className="BG-2">
                        <div className="Content"><Content/></div>
                        <div className="Portfolio"><Portfolio /></div>
                    </div>

                    <div className="Footer"><Footer /></div>
                </div>

            </Router>
        );
    }
}

export default App;

标题.jsx:

import React, { Component} from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { Route, Link, Switch, BrowserRouter as Router } from 'react-router-dom';

import App from '../App.jsx'
import About from '../components/About.jsx'
import '../assets/styles.css';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUserAstronaut } from '@fortawesome/free-solid-svg-icons'

class Header extends Component {

    constructor (props){
        super(props);
        console.log('header');
    }

    click = () => {
        console.log('The link was clicked.');
        this.props.parentMethod();
    }

    render() {
        return(
            <Router>
                <div>
                    <Navbar className="Header-header" light expand="md"> 
                            <Nav className="ml-auto" navbar>
                                <NavItem>
                                    <Link to='/#about' className="Header-link" onClick={this.click}><NavLink> About </NavLink></Link>
                                </NavItem>
                            </Nav>
                    </Navbar>
                </div>
            </Router>
        )
    }
}

export default Header;

关于.jsx:

import React, { Component } from 'react';
import { Row, Col, Toast, ToastBody, ToastHeader } from 'reactstrap';

import Header from '../components/Header.jsx'
import '../assets/styles.css';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDoubleDown } from '@fortawesome/free-solid-svg-icons'


class About extends Component {

    constructor (props){
        super(props);
        this.state = { currOpacity: 1 };
        console.log('about');
    }

    componentDidMount () { 
        window.onscroll =()=>{ 
            if (window.scrollY < 750){
                this.setState({currOpacity: 1})
            }
            if (750 <= window.scrollY){
                const newOpacity = (200 - ((Math.ceil(window.scrollY/ 25)*25) - 750))/200;
                this.setState({currOpacity: newOpacity})
            }
        }
    }

    newRef() {
        console.log("Yo dawg.");
    }

    render () {
        const opacity = Math.min(this.state.currOpacity, 1);
        // console.log("scrollY", window.scrollY, (200 - ((Math.ceil(window.scrollY/ 25)*25) - 750))/200)
        // console.log("opacity:", opacity)
        return (
            <div href='/#section-about'>
                <span className="Main-arrow" style={{ opacity }}>
                    <FontAwesomeIcon className="Main-arrow-icon" icon={faAngleDoubleDown} size="3x" />
                </span>
                <Row className="About-title-row">
                    <h1 className="About-title" id={'about'} parentMethod={this.newRef}>About Me</h1>
                </Row>
            </div>
        )
    }
}

export default About;

如果需要更多代码，请告诉我，一些不相关的内容已被删除。任何帮助将不胜感激!

安东尼

1点击链接滚动方式:Click link to scroll to specific section react.js

2从子级调用父级方法:React - Call parent method in child component

Answer 1

您收到类型错误，因为 prop parentMethod未传递至Header component .

在您的 App.jsx 中您需要将 prop 传递给 Header Component 的文件像这样 <Header parentMethod={() => {}} />那么它不会通过类型错误

并且您必须在 App.jsx 中创建一个方法您想要执行的文件，就像您在 About.jsx 中创建的文件一样

import React, { Component } from 'react';
import { Route, Switch, BrowserRouter as Router} from 'react-router-dom';

import Header from './components/Header.jsx'
import Footer from './components/Footer.jsx'
import Main from './components/Main.jsx'
import About from './components/About.jsx'
import Content from './components/Content.jsx'
import Portfolio from './components/Portfolio.jsx'

import './assets/styles.css';

class App extends Component {
    constructor (props){
        super(props);
        console.log("app");
    }
    newRef() {
        console.log("Yo dawg.");
    }

    render() {
        return (
            <Router>
                <div className="Global">
                    <div className="BG-1">
                        <div className="Header"><Header parentMethod={this.newRef}/></div>
                        <div className="Main"><Main /></div>
                        <div className="About"><About/></div>
                    </div>

                    <div className="BG-2">
                        <div className="Content"><Content/></div>
                        <div className="Portfolio"><Portfolio /></div>
                    </div>

                    <div className="Footer"><Footer /></div>
                </div>

            </Router>
        );
    }
}

export default App;

更新您的Header.jsx文件如下

  click = (link) => {
    console.log("The link was clicked.", this.props);
    this.props.parentMethod();
    window.location = link;
  };

and update the link as below

<Link to="/#about" className="Header-link" onClick={() => this.click('/#about')}>
  <NavLink> About </NavLink>
</Link>