Question

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

                                                                           QUERY PLAN
----------------------------------------------------------------------------------------------------------------------------------------------------------------
 HashAggregate  (cost=904989.83..905049.21 rows=5938 width=8) (actual time=3118569.759..3118581.444 rows=54400 loops=1)
   Group Key: t1.listing_id
   ->  Nested Loop  (cost=0.41..904960.14 rows=5938 width=8) (actual time=2.624..2881694.755 rows=837837851 loops=1)
         ->  Seq Scan on airdna_property t2  (cost=0.00..74842.84 rows=121245 width=56) (actual time=2.263..949.073 rows=151018 loops=1)
               Filter: (city = 'Paris'::text)
               Rows Removed by Filter: 435564
         ->  Index Scan using paris_pts_geog_idx on paris t1  (cost=0.41..6.84 rows=1 width=64) (actual time=0.139..18.555 rows=5548 loops=151018)
               Index Cond: (pts_geog && _st_expand(t2.pts_geog, '1000'::double precision))
               Filter: ((t2.pts_geog && _st_expand(pts_geog, '1000'::double precision)) AND _st_dwithin(pts_geog, t2.pts_geog, '1000'::double precision, true))
               Rows Removed by Filter: 3257
 Planning time: 0.377 ms
 Execution time: 3118583.203 ms
(12 rows)

现在，只要有人按下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>，我就会发送click()，然后我想让NavButton可见。我该怎么做？现在我已经硬编码了Dropdown Dropdown。

我也想知道我是否正确地做这件事，在这些不同的功能中松散地拥有一切，如果有人能告诉我这将是伟大的！

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

React - 单击更改CSS属性（箭头功能）

1 个答案: