Fatal编程技术网
  • javascript/
  • Javascript 下一步/反应-处理指向另一篇文章的链接

Javascript 下一步/反应-处理指向另一篇文章的链接

javascript reactjs next.js

Javascript 下一步/反应-处理指向另一篇文章的链接,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我正在使用一个Next.js模板，它具有以下index.js： import Head from "next/head" import stylesheet from '../styles/main.scss' import Header from "../components/Header" import Main from "../components/Main" import Footer from "../compo

我正在使用一个Next.js模板，它具有以下
index.js
：

import Head from "next/head"
import stylesheet from '../styles/main.scss'

import Header from "../components/Header"
import Main from "../components/Main"
import Footer from "../components/Footer"

class IndexPage extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            isArticleVisible: false,
            timeout: false,
            articleTimeout: false,
            article: "",
            loading: "is-loading"
        }
        this.handleOpenArticle = this.handleOpenArticle.bind(this)
        this.handleCloseArticle = this.handleCloseArticle.bind(this)
        this.handleLinkArticle = this.handleCloseArticle.bind(this)
    }

    componentDidMount() {
        this.timeoutId = setTimeout(() => {
            this.setState({ loading: "" })
        }, 100)
    }

    componentWillUnmount() {
        if (this.timeoutId) {
            clearTimeout(this.timeoutId)
        }
    }

    handleOpenArticle(article) {
        this.setState({
            isArticleVisible: !this.state.isArticleVisible,
            article
        })

        setTimeout(() => {
            this.setState({
                timeout: !this.state.timeout
            })
        }, 325)

        setTimeout(() => {
            this.setState({
                articleTimeout: !this.state.articleTimeout
            })
        }, 350)
    }

    handleCloseArticle() {
        this.setState({
            articleTimeout: !this.state.articleTimeout
        })

        setTimeout(() => {
            this.setState({
                timeout: !this.state.timeout
            })
        }, 325)

        setTimeout(() => {
            this.setState({
                isArticleVisible: !this.state.isArticleVisible,
                article: ""
            })
        }, 350)
    }
    // this is what I've tried. Doesn't work
    handleLinkArticle(article) {
        handleCloseArticle()
        handleOpenArticle(article)
    }

    render() {
        return (
            <div className={`body ${this.state.loading} ${this.state.isArticleVisible ? "is-article-visible" : ""}`}>
                <div>
                    <Head>
                        <title>MyTitle</title>
                        <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,600,600i" rel="stylesheet" />
                    </Head>

                    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />

                    <div id="wrapper">
                        <Header onOpenArticle={this.handleOpenArticle} timeout={this.state.timeout} />
                        <Main
                            isArticleVisible={this.state.isArticleVisible}
                            timeout={this.state.timeout}
                            articleTimeout={this.state.articleTimeout}
                            article={this.state.article}
                            onCloseArticle={this.handleCloseArticle}
                            onOpenArticle={this.handleOpenArticle}
                            onLinkArticle={this.handleLinkArticle}
                        />
                        <Footer timeout={this.state.timeout} />
                    </div>

                    <div id="bg" />
                </div>
            </div>
        )
    }
}

export default IndexPage
它只是关闭文章，而不打开另一篇。
handleLinkArticle（）
的正确格式是什么

import PropTypes from 'prop-types';

class Main extends React.Component {
  render() {

    let close = <div className="close" onClick={() => {this.props.onCloseArticle()}}></div>

    return (
      <div id="main" style={this.props.timeout ? {display: 'flex'} : {display: 'none'}}>

        <article id="start" className={`${this.props.article === 'start' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
          <h2 className="major">Start Here</h2>
          <span className="image main"><img src="/static/images/intro.png" alt="" /></span>
          <p>For more information on how to become a Beta tester <a href="javascript:;" onClick={() => {this.props.onLinkArticle('try')}}>click here</a>.</p>
          {close}
        </article>

        <article id="try" className={`${this.props.article === 'try' ? 'active' : ''} ${this.props.articleTimeout ? 'timeout' : ''}`} style={{display:'none'}}>
          <h2 className="major">Try</h2>
          <h3>Beta phase</h3>
          <p>We are currently in Beta phase. If you wish to become a Beta tester, follow the instructions below.</p>
          {close}
        </article>

      </div>
    )
  }
}

Main.propTypes = {
  route: PropTypes.object,
  article: PropTypes.string,
  articleTimeout: PropTypes.bool,
  onCloseArticle: PropTypes.func,
  onOpenArticle: PropTypes.func,
  onLinkArticle: PropTypes.func,
  timeout: PropTypes.bool
}

export default Main

handleLinkArticle(article) {
    handleCloseArticle()
    handleOpenArticle(article)
}