javascript - 如何将点击功能链接到 React 应用程序中的另一个组件？

Question

我有一个包含 Logo 的着陆页。我试图让这个标志触发状态值的变化。这样做的目的是在点击时从着陆页更改为主页。我已将其设置为在确定的时间内清除登录页面，但我想在点击时执行此操作。这是我的 splash.js 文件，其中包含点击功能以及 Logo 和着陆页:

import React, { Component } from 'react';
import Woods from './woods.jpeg';
import Logo1 from './whitestar.png';


export default class Splash extends Component {
    constructor() {
        super();
            this.toggleShowHome = this.toggleShowHome.bind(this);
    }

    toggleShowHome(property){
        this.setState((prevState)=>({[property]:!prevState[property]}))
     }

    render() {
        return(
            <div id='Splashwrapper'>
                <img src={Woods}></img>
                <img id='logoc' src={Logo1} onClick={()=>this.toggleShowHome('showSquareOne')}></img>
            </div>    
        );  
    }
}

我希望点击功能在我的 App.js 文件中将 splash 的值更改为 false:

import React, { Component } from 'react';
import Splash from './splash';

import Menu from 'components/Global/Menu';

export default class About extends Component {
    constructor(){
        super();
        this.state = {
            splash: true
        }

    }

    componentDidMount() {
        setTimeout (() => {
        this.setState({splash: false});
        }, 10000);
    }

    render() {
        if (this.state.splash) {
            return <Splash />
        }

        const { children } = this.props; // eslint-disable-line

        return (
            <div className='About'>
                <Menu />
                { children }
            </div>
        );
    }
}

如何将点击功能链接到 App.js 文件并更改 splash 的值？

Answer 1

您应该在 app.is 中定义函数 toggleShowHome 并将其作为 prop 传递给启动组件。然后你可以在 app.js 中改变你的本地状态