React - 單擊更改CSS屬性（箭頭功能）

Question

我的React / Gatsby文件中有以下內容：

import React from "react"

const click = () => {
  console.log("J");
}

const NavButton = () => 
  <button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={click}>
    <div id="nav-icon1">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </button>

const Dropdown = () => 
<div style={{visibility: "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}>
</div>

export default (props) =>
  <div className="left col-xs-12 col-md-6">
    <Dropdown />
    <NavButton />
    {props.children}
  </div>

現在我想在有人按下NavButton時觸發click() ，然后我想讓Dropdown可見。 我該怎么做？ 現在我有硬編碼， Dropdown style={{visibility: "hidden", ...

我也想知道我是否正確地做這件事，在這些不同的功能中松散地擁有一切，如果有人能告訴我那將是偉大的！

Answer 1

您的控制類需要是有狀態的：它需要保持關於下拉列表是打開還是關閉的布爾狀態。 渲染下拉列表時，如果布爾值打開，那么您將顯示下拉列表，否則您將不會。

這是為了執行此操作而重寫的代碼。 請注意，子組件將props作為參數。 這就是父母與他們溝通的方式。 其中一些道具是回調，這是孩子與父母溝通的方式。

import React from "react"

const NavButton = ({onClick}) => 
  <button className="navbar-toggler navbar-toggler-right" style={{backgroundColor: 'blue', position: "absolute", margin: "30px"}}type="button" data-toggle="collapse" data-target="#collapsingNavbar" onClick={onClick}>
    <div id="nav-icon1">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </button>

const Dropdown = ({show}) => 
<div style={{visibility: show ? "visible" : "hidden", backgroundColor: "blue", position: "absolute", height: "100%", width: "100%"}}>
</div>

export default class Parent extends React.Component {
  state = {
    dropdownVisible: false,
  };

  // toggles the dropdown each time it is called
  toggleDropdown = () => this.setState(state => ({
    dropdownVisible: !state.dropdownVisible,
  }));

  render() {
    return (
      <div className="left col-xs-12 col-md-6">
        <Dropdown show={this.state.dropdownVisible} />
        <NavButton onClick={this.toggleDropdown} />
        {this.props.children}
      </div>
    );
  }
}