Question

我是一个新手，正在尝试使用弹出窗口模式作为一个小项目来创建一个响应式导航栏，但是由于我尝试在App.js中两次调用具有不同属性的const，因此其中只有一个它正在应用程序中工作。我试着删除工作正常的一个，另一个工作正常，这是它们一起工作的唯一问题。

Toolbar.js

import React from 'react';
import Logo from "../../img/DW_Logo.png";
import DrawerToggleButton from '../SideDrawer/DrawerToggleButton';
import './Toolbar.css';


const toolbar = props => (
<header className="toolbar">
    <nav className="toolbar_navigation">

        <div className="toolbar_logo">
            <a href="/"><img src={Logo} /></a>
        </div>
        <div className="spacer" />
        <div className="toolbar_navigation-items">
            <ul>
                <li><a href="/">About</a></li>
                <li><a onClick={props.popup}>News</a></li>
                <li className="sign_in"><a href="/">Sign In/ Login</a></li>
            </ul>
        </div>
        <div className="toolbar_toggle">
            <DrawerToggleButton click={props.drawerClickHandler} />
        </div>
    </nav>
</header>

);

export default toolbar;

您可以看到我有onClick={props.popup}和click={props.drawerClickHandler}

我尝试在App.js中运行

import React, { Component } from 'react';
import Toolbar from './header/Toolbar/Toolbar';
import SideDrawer from './header/SideDrawer/SideDrawer';
import Backdrop from './header/Backdrop/Backdrop';
import Modal from "./header/Modal/Modal";

class App extends Component {

  state = {
    sideDrawerOpen: false
  };
  state = {
    modalOpen: false
  };
  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return {sideDrawerOpen: !prevState.sideDrawerOpen};
    });
  };

  modalClickHandler = () => {
    this.setState((prevState) => {
      return {modalOpen: !prevState.modalOpen};
    });
  };

  backdropClickHandler = () => {
    this.setState({sideDrawerOpen: false});
    this.setState({modalOpen: false});
  };

  render() {
    let backdrop;

    if (this.state.sideDrawerOpen) {
      backdrop = <Backdrop click={this.backdropClickHandler} />;
    }
    if (this.state.modalOpen) {
      backdrop = <Backdrop click={this.backdropClickHandler} />;
    }
    return (
      <div style={{height: '100%'}}>
        <Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
        <Toolbar popup={this.modalClickHandler} />
        <SideDrawer show={this.state.sideDrawerOpen} />
        {backdrop}
        <Modal show={this.state.modalOpen}/>

        <main style={{marginTop: '64px'}}>
          <p>This is the page content!</p>
        </main> 
      </div>
    );
  }
}

export default App;

只有<Toolbar popup={this.modalClickHandler} />在运行，如果我将其删除，<Toolbar drawerClickHandler={this.drawerToggleClickHandler} />可以正常工作。

我正在基于从教程中学到的侧抽屉构建此模式，并来到了这个障碍，需要我帮助理解和解决。

Answer 1

我认为这不是const问题。

<Toolbar drawerClickHandler={this.drawerToggleClickHandler} popup={this.modalClickHandler} />

您应该在一个组件中添加两个道具。

return (
  <div style={{height: '100%'}}>
    <Toolbar drawerClickHandler={this.drawerToggleClickHandler} 
             popup={this.modalClickHandler}/>
    <SideDrawer show={this.state.sideDrawerOpen} />
    {backdrop}
    <Modal show={this.state.modalOpen}/>

    <main style={{marginTop: '64px'}}>
      <p>This is the page content!</p>
    </main> 
  </div>
);

Answer 2

似乎您在设计工具栏时在一个组件中同时使用了drawerClickHandler属性和弹出属性。

但是您将工具栏组件渲染了2次，并分别向其传递了drawerClickHandler道具和弹出道具。

我认为您应该只渲染一次工具栏，并同时传递dragderClickHandler道具和弹出道具。

示例：

render () {
  return (
    <div style={{height: '100%'}}>
     <Toolbar drawerClickHandler={this.drawerToggleClickHandler} popup={this.modalClickHandler} />
     <SideDrawer show={this.state.sideDrawerOpen} />
     {backdrop}
     <Modal show={this.state.modalOpen}/>

    <main style={{marginTop: '64px'}}>
      <p>This is the page content!</p>
    </main> 
   </div>
  )
}

React const无法调用2个不同的属性？

2 个答案: