javascript - Reactjs - 两个组件之间的通信

Question

我想从一个组件调用另一个组件的函数。在谷歌搜索后我尝试了一些不同的事情，但由于我是 ReactJS 的新手，我似乎无法解决这个问题。我以为我可以导入状态，然后从其他组件更改它(见下文)，但我认为我找错了树？

我想从 locationform.js 调用 header.js 中的 showMenu()

header.js

import React, { Component, PropTypes } from 'react';
import ReactF1 from 'react-f1';

// Styles.
import styles from './Header.css';

// Elements.
import Menu from './elements/Menu';

// Menu states.
import { states, SHOWBUTTON, IDLE, HIDE, OUT } from './elements/Menu/states';

import transitions from './elements/Menu/transitions';

function changeOffset() {
  document.querySelector('svg path').style.strokeDashoffset = 0;
  setTimeout("document.querySelector('svg path').style.strokeDashoffset = 171", 2000);
}

export default class Header extends Component {
  static get propTypes() {
    return {
      children: PropTypes.element,
    };
  }

  constructor(props, context) {
    super(props, context);

    this.state = {
      menuState: OUT,
      hamburgerState: OUT,
    };
  }

  componentDidMount() {
    if (this.props.router.location.pathname === '/') {
      setTimeout(() => this.setState({ hamburgerState: SHOWBUTTON }), 6000);
    } else {
      this.setState({ hamburgerState: SHOWBUTTON });
    }
    // setTimeout(changeOffset, 8000);
  }

  completeF1Handler() {}

  showMenu() {
    this.setState({ menuState: IDLE });
  }

  hideMenu() {
    this.setState({ menuState: HIDE });
  }

  reset() {
    this.setState({ menuState: OUT });
  }

  render() {
    const { stageWidth, stageHeight } = this.props;

    return (
      <ReactF1
        className={styles.Header}
        go={this.state.hamburgerState}
        states={states(stageWidth, stageHeight)}
        transitions={transitions()}
        onComplete={() => this.completeF1Handler()}
      >
        <svg className={styles.hamburger} data-f1="hamburger" width="50" height="50">
          <path
              className={styles.triangle}
              d="M0 0 L50 0 L0 50 Z"
              onClick={this.showMenu.bind(this)}
              fill={this.props.menuColor}
          />
        </svg>
        <Menu
          go={this.state.menuState}
          close={this.hideMenu.bind(this)}
          reset={this.reset.bind(this)}
        />
      </ReactF1>
    );
  }
}

locationform.js

import React, { Component, PropTypes } from 'react';
import { isDesktop } from '../../utils/device';
import LocateSelect from '../LocateSelect';

import styles from './LocationForm.css';
import buttonStyles from '../Button/Button.css';

// Menu states.
import { states, SHOWBUTTON, IDLE, HIDE, OUT } from '../Header/elements/Menu/states';

export default class LocationForm extends Component {
  static get propTypes() {
    return {
      zipCode: PropTypes.string,
      searchRadius: PropTypes.string,
      businessType: PropTypes.string,
      handleChange: PropTypes.func,
      handleGeolocate: PropTypes.func,
      handleSubmit: PropTypes.func,
    };
  }

  constructor(props, context) {
    super(props, context);
  }



  showMenu() {
    console.log("show menu");
      this.setState({ menuState: IDLE });
  }

  renderSelect() {
    const { searchRadius, businessType, handleChange } = this.props;

    return (
      <div className={styles.selectContainer}>
        <LocateSelect
          id="searchRadius"
          defaultValue=""
          value={searchRadius}
          handleChange={handleChange}
          options={[
            {
              value: '',
              text: 'SEARCH RADIUS',
            },
            {
              value: '1',
              text: '1 MI',
            },
            {
              value: '5',
              text: '5 MI',
            },
            {
              value: '10',
              text: '10 MI',
            },
            {
              value: '25',
              text: '25 MI',
            },
          ]}
        />
        <LocateSelect
          id="businessType"
          defaultValue=""
          value={businessType}
          handleChange={handleChange}
          options={[
            {
              value: '',
              text: 'BUSINESS TYPE',
            },
            {
              value: 'bar',
              text: 'Bar',
            },
            {
              value: 'restaurant',
              text: 'Restaurant',
            },
            {
              value: 'liquorstore',
              text: 'Liquor Store',
            },
          ]}
        />
      </div>
    );
  }

  render() {
    const {
      zipCode,
      handleChange,
      handleSubmit,
      handleGeolocate,
      handleFocus,
      handleBlur,
    } = this.props;

    return (
      <form className={styles.LocationForm} onSubmit={handleSubmit}>
        <input
          type="button"
          className={`${buttonStyles.Button} ${buttonStyles.dark} ${styles.geolocate}`}
          value="Use Current Location"
          onClick={handleGeolocate}
        />
        <p>OR</p>
        <input
          id="zipCode"
          type="text"
          placeholder="ZIP CODE"
          value={zipCode}
          maxLength="5"
          pattern="[0-9]*"
          onFocus={handleFocus}
          onBlur={handleBlur}
          onChange={event => handleChange(event.target.id, event.target.value)}
        />
        {this.renderSelect()}
        <input
          className={`${buttonStyles.Button} ${buttonStyles.dark}`}
          type="submit"
          value="search"
        />
          <div className={buttonStyles.Button} onClick={() => this.showMenu()}>
              No
          </div>
      </form>
    );
  }
}

Answer 1

考虑到 react 中的父子通信，您必须为这两个文件编写一个父文件，并将函数和状态作为 props 传递。

例如:

app.js

import Header from './header.js'
import LocationForm from './location-form.js'

export default class App extends Component {
  state = {menuState : 'out'}
  showMenu() {
    this.setState({ menuState:'idle' });
  }
  render(){
    return(
      <div>
        <Header showMenu={this.showMenu} menuState={this.state.menuState}/>
        <LocationForm showMenu={this.showMenu} menuState={this.state.menuState}/>
      </div>
    )
  }  
}

我认为这种思维概念将帮助你找到答案