时间戳

首页 > 解决方案 > 有没有办法通过使用 HandleClick 来调用组件？

reactjs - 有没有办法通过使用 HandleClick 来调用组件？

问题描述

我面临着制造和理解的麻烦，如果可能的话，如何用我的反应日历调用我的组件（当我 localhost:3000/Avaibalities 时，我的日历工作得很好）。

这是代码：

我的投资组合主页：

import React from 'react';
import NavigationNew from '../components/NavigationNew';
import Modal from './Modal';

const Home = () => {
  return (
    <div className="home">
      <NavigationNew />
      <div className="homeContent">
        <div className="content">
          <h1>Welcome</h1>
          <h2>I'm a Front Desk Agent</h2>
          <a href="./CV.pdf" target="_blank">Download CV</a>
          <Modal />
        </div>
      </div>
    </div>
  );
};

export default Home;

`

这是我的组件 Modal，主页通过一个按钮调用我的带有日历的 Avaibalities 组件。

import React from 'react';
import Avaibalities from './Avaibalities';


class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    return <Avaibalities />
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>Book me</button>
      </div>
    );
  }
};


export default Modal;

这是可用性组件：

import React from 'react';
import Calendar from "react-calendar";

class Avaibalities extends React.Component {`enter code here`
  render() {
    return (
      <>
        <div className="CalendarMain">
          <h2>My Avaibalities</h2>
          <Calendar />
        </div>
      </>
    )

  }

}

export default Avaibalities;

标签： reactjs

解决方案

一种更直接且对 React 友好的处理方式是建立一些有条件地显示组件的状态。

这是您要应用的修改类型：

import React from 'react';
import Avaibalities from './Avaibalities';


class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      displayAvailabilities: false,
    }
  }

  render() {
    return (
      <div>
        {this.state.displayAvailabilities && <Availabilities />}
        <button 
          onClick={() => this.setState({ displayAvailabilities: true })}
        >
         Book me
        </button>
      </div>
    );
  }
};

当相应的状态设置为 true 时，这利用了短路来显示可用性组件。然后，您可以通过将该状态设置为 false 来再次隐藏它们。

除此之外，您当前的方法肯定是返回组件，但没有什么告诉 React 渲染从您的函数返回的组件。

推荐阅读