Javascript函数在主页面上运行，但在第二页上停止

我正在尝试用ReactJS制作一个网站。在我的网站主页上我有一个切片按钮

单击“切片”按钮时，每一侧显示不同的图像

我还为slice按钮添加了菜单栏的链接（我将称之为Left-Right），因此当您单击链接时，首先转到主页的部分，然后它移动slice按钮并显示图像

我没有任何问题的链接，当我在主页上，但问题是；我对所有页面使用相同的菜单栏，当我在不同页面上单击菜单中的

左

和

右

右链接时，它停止

链接将打开主页，但保留在主页的开头

更新2：虽然问题不在于

切换按钮

，但我想在主页中添加切换功能，您可以看到所有内容

注意：我删除了

切换按钮

，但链接不起作用（对，当我删除功能时，我看不到按钮，但当我单击菜单中的链接时，页面没有链接到主页中按钮的确切部分，因此我仍然有相同的问题。）

这是我的

changeviewbutton单击主菜单中的

函数

import React, { Component } from "react";


class Main extends React.Component{

  constructor(props) {
    super(props);
    this.state = {
      view: "Left"
    };
    this.ChangeViewButtonClick = this.ChangeViewButtonClick.bind(this);
    this.ChangeViewToggle = this.ChangeViewToggle.bind(this);
  }

   togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }

  ChangeViewToggle() {
    if (this.refs.toggle.state.checked === true) {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = false
    } else  {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = true
    }
  }
  ChangeViewButtonClick(view) {
    if (view === "Left") {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = true
    } else if (view === "Right") {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = false
    }
  }

  render(){
    return(
      <div>
        <h1> 
           <footer className="togglefooter">
            <label>
                  &nbsp;
                  <span style={{ color: "black", fontWeight: "normal" }}>
                   Left
                    &nbsp;
                  </span>
                  <Toggle
                    id="toggle"
                    ref="toggle"
                    defaultChecked={this.state.view}
                    icons={false}
                    onChange={() => this.ChangeViewToggle()}
                  />
                  <span style={{ color: "black", fontWeight: "normal" }}>
                    &nbsp;
                    Right
                  </span>
                </label>
              </footer>
        </h1>
      </div>
    );
  }
}

报告页：

import React, { Component } from "react";
import ReactGA from 'react-ga';
import ReactDependentScript from 'react-dependent-script';
import Footer from "./components/Footer.js";
import Menu from "./components/Menu.js"
//Import PNG Image
//import { domain } from "./config.json";
import GraphHover from "./components/GraphHover.js";

class report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayGraph: "none",
      graphTitle: null,
      graphPreview: null,
      graphHoverLeft: "0",
      previewImages: null,
    };
    this._onMouseLeave = this._onMouseLeave.bind(this);
    this.DisplayHoverGraph = this.DisplayHoverGraph.bind(this);
  }

  _onMouseLeave(evt) {
    this.setState({ displayGraph: "none" });
  }

  DisplayHoverGraph(input, image, evt) {
    //Disable hover effect if on a mobile device
    if (!this.props.isMobileDevice) {
      this.setState({
        graphTitle: input,
        previewImage: image,
        displayGraph: "inline"
      });

      if (evt.clientX < window.screen.width / 2) {
        this.setState({ graphHoverLeft: "1200px" });
      } else {
        this.setState({ graphHoverLeft: "0" });
      }
    }
  }

  componentDidMount() {
    console.log(window.test)
  }

  render() {
    return (
      <div>
        <GraphHover
          position="fixed"
          top={this.state.graphHoverTop}
          left={this.state.graphHoverLeft}
          displayPreview={true}
          display={this.state.displayGraph}
          graphTitle={this.state.graphTitle}
          previewImage={this.state.previewImage}
          graphHeadingSize={this.state.graphHeadingSize}
          width={this.state.graphHoverWidth}
          height={this.state.graphHoverHeight}
        />
        <div className="bgded overlay">
          {/* Menu */}
          <Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} />
        </div>
        <div className="wrapper row3">
          <a id="sumary" />
          <main className="hoc container clear" style={{ paddingTop: "30px" }}>
            <div className="clear" />
          </main>
        </div>
        <Footer />
      </div>
    );
  }
}

export default report;

import React，{Component}来自“React”；
从“react ga”导入ReactGA；
从“反应依赖脚本”导入反应依赖脚本；
从“/components/Footer.js”导入页脚；
从“/components/Menu.js”导入菜单
//导入PNG图像
//从“/config.json”导入{domain}；
从“/components/GraphHover.js”导入GraphHover；
类报表扩展组件{
建造师（道具）{
超级（道具）；
此.state={
显示图形：“无”，
graphTitle:null，
graphPreview:null，
图左上方：“0”，
预览图像：空，
};
this.onMouseLeave=this.onMouseLeave.bind（this）；
this.DisplayHoverGraph=this.DisplayHoverGraph.bind（this）；
}
_onMouseLeave（evt）{
this.setState（{displayGraph:“none”}）；
}
显示悬停图（输入、图像、evt）{
//在移动设备上禁用悬停效果
如果（！this.props.isMobileDevice）{
这是我的国家({
graphTitle：输入，
预览图像：图像，
显示图形：“内联”
});
如果（evt.clientX

您有

更改视图按钮单击
主组件中的
函数，但您不会将此函数传递到
菜单
组件中


import React，{Component}来自“React”；
从“./菜单”导入菜单
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
视图：“左”
};
this.ChangeViewButtonClick=this.ChangeViewButtonClick.bind（this）；
}
更改视图按钮单击（视图）{
如果（视图=“左”）{
this.setState（{view:“Left”}）；
this.refs.toggle.state.checked=true
}else if（视图==“右侧”）{
this.setState（{view:“Right”}）；
this.refs.toggle.state.checked=false
}
}
render（）{
返回(
主页在这里
);
}
}
您需要通过父类（在您的情况下为Main）将prop changeviewbutton单击传递给子类（在您的情况下为类About或类报告）

因此，您的结构如下-

主要

----关于

----报告

我之所以提到about和report将是主类的子类，是因为它们像这样访问prop函数
，其中this.props.changeviewButton应可用于report和about页面

注意：您可能需要添加一个导航逻辑来加载相应的页面。下面我将给出一个简单的片段

import React, { Component } from "react";
import Menu from './Menu'
import report from "./report"
import about from "./about"

class Main extends React.Component{

constructor(props) {
    super(props);
    this.state = {
      view: "Left"
   };
 this.ChangeViewButtonClick = this.ChangeViewButtonClick.bind(this);
 }

    ChangeViewButtonClick(view) {
    if (view === "Left") {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = true
    } else if (view === "Right") {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = false
    }
  }

render(){
return(
    <div>
        <h1>Main Page is Here </h1>
        // Some navigation logic between the pages below
        <report onChangeViewButtonClick={this.ChangeViewButtonClick} />
        <about onChangeViewButtonClick={this.ChangeViewButtonClick} />

    </div>
  );
 }
}

import React，{Component}来自“React”；
从“./菜单”导入菜单
从“/report”导入报告
从“/about”导入关于
类Main扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
视图：“左”
};
this.ChangeViewButtonClick=this.ChangeViewButtonClick.bind（this）；
}
更改视图按钮单击（视图）{
如果（视图=“左”）{
this.setState（{view:“Left”}）；
this.refs.toggle.state.checked=true
}else if（视图==“右侧”）{
this.setState（{view:“Right”}）；
this.refs.toggle.state.checked=false
}
}
render（）{
返回(
主页在这里
//以下页面之间的一些导航逻辑
);
}
}
您不需要将
更改视图按钮单击
功能进入菜单component@axis如果您可以添加您的路由配置，这将是一点帮助。因为，我可以确保我可以模仿same@axis你能检查一下这个链接并告诉我这是否是你想要做的吗。如果你有回购协议，请在这里分享。我怀疑是因为崩塌在起作用。嗨@vdj4y。在你的观点之后，我去掉了折叠函数。虽然如果屏幕大小不是手机屏幕大小，则折叠不会激活，但我很抱歉相同。您好@Marty，谢谢您对我的问题所取得的进展。第一次我更新了我的问题。第二个是我正在其他页面中传递
菜单
组件，因为我在主页中没有任何问题，尽管我以前尝试过，但结果很不幸是相同的。您好，您知道您的建议将所有外部页面都放在主页中吗？这实际上是没有用的，这也不起作用unfortunately@Axis，我补充的只是一个片段。另外，如果您的外部页面有一个名为attac的组件
import React, { Component } from "react";
import ReactGA from 'react-ga';
import ReactDependentScript from 'react-dependent-script';
import Footer from "./components/Footer.js";
import Menu from "./components/Menu.js"
//Import PNG Image
//import { domain } from "./config.json";
import GraphHover from "./components/GraphHover.js";

class report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      displayGraph: "none",
      graphTitle: null,
      graphPreview: null,
      graphHoverLeft: "0",
      previewImages: null,
    };
    this._onMouseLeave = this._onMouseLeave.bind(this);
    this.DisplayHoverGraph = this.DisplayHoverGraph.bind(this);
  }

  _onMouseLeave(evt) {
    this.setState({ displayGraph: "none" });
  }

  DisplayHoverGraph(input, image, evt) {
    //Disable hover effect if on a mobile device
    if (!this.props.isMobileDevice) {
      this.setState({
        graphTitle: input,
        previewImage: image,
        displayGraph: "inline"
      });

      if (evt.clientX < window.screen.width / 2) {
        this.setState({ graphHoverLeft: "1200px" });
      } else {
        this.setState({ graphHoverLeft: "0" });
      }
    }
  }

  componentDidMount() {
    console.log(window.test)
  }

  render() {
    return (
      <div>
        <GraphHover
          position="fixed"
          top={this.state.graphHoverTop}
          left={this.state.graphHoverLeft}
          displayPreview={true}
          display={this.state.displayGraph}
          graphTitle={this.state.graphTitle}
          previewImage={this.state.previewImage}
          graphHeadingSize={this.state.graphHeadingSize}
          width={this.state.graphHoverWidth}
          height={this.state.graphHoverHeight}
        />
        <div className="bgded overlay">
          {/* Menu */}
          <Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} />
        </div>
        <div className="wrapper row3">
          <a id="sumary" />
          <main className="hoc container clear" style={{ paddingTop: "30px" }}>
            <div className="clear" />
          </main>
        </div>
        <Footer />
      </div>
    );
  }
}

export default report;

import React, { Component } from "react";
import Menu from './Menu'
import report from "./report"
import about from "./about"

class Main extends React.Component{

constructor(props) {
    super(props);
    this.state = {
      view: "Left"
   };
 this.ChangeViewButtonClick = this.ChangeViewButtonClick.bind(this);
 }

    ChangeViewButtonClick(view) {
    if (view === "Left") {
      this.setState({ view: "Left" });
      this.refs.toggle.state.checked = true
    } else if (view === "Right") {
      this.setState({ view: "Right" });
      this.refs.toggle.state.checked = false
    }
  }

render(){
return(
    <div>
        <h1>Main Page is Here </h1>
        // Some navigation logic between the pages below
        <report onChangeViewButtonClick={this.ChangeViewButtonClick} />
        <about onChangeViewButtonClick={this.ChangeViewButtonClick} />

    </div>
  );
 }
}