React常量不能调用2个不同的属性？

Question

我对反应有点陌生，并试图制作一个带有弹出模态的响应式导航栏作为一个小项目，但是当我尝试在应用程序中调用 const 两次时.js它具有不同的属性，只有一个在应用程序中工作。我尝试删除工作的一个，另一个工作正常，唯一的问题是它们一起工作。

工具栏. 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}以及单击={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;

只

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




Answer 1

看起来您设计的工具栏在一个组件中同时使用drawerClickHandler属性和弹出属性。

但是您渲染工具栏组件 2 次，并将单独的抽屉点击处理程序道具和弹出道具传递给它们。

我认为您应该只渲染一次工具栏，并传递drawerClickHandler属性和弹出属性。

例：

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>
  )
}

Answer 2

我认为这不是一个常数问题..,

<代码>

你应该添加一个组件两个道具…

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>
);