Javascript 从不同的react文件调用函数

我很快就能让它发挥作用了。希望有人能帮我

我有两个文件。一个是

容器

，另一个是

导航

组件

在名为

\u template.js

的容器组件中，我正在导入一个模式npm包。我在这个容器文件中创建了一个

showmodel

函数，我试图在

Nav

组件中访问它

这就是我到目前为止收到的错误

uncaughttypeerror:无法读取未定义的属性“model”

_template.js：

import React from 'react';
import { Link } from 'react-router';


import { prefixLink } from 'gatsby-helpers';
import { config } from 'config';

import Headroom from 'react-headroom';

import Nav from './nav.js';

import '../css/main.scss';

import Modal from 'boron/DropModal';

const modalStyle = {
  minHeight: '500px',
  backgroundColor: '#303841'
};

const backdropStyle = {
  backgroundColor: '#F6C90E'
};

const contentStyle = {
  backgroundColor: '#303841',
  padding: '3rem'
};





export default class RootTemplate extends React.Component {
  static propTypes = {
    location: React.PropTypes.object.isRequired,
    children: React.PropTypes.object.isRequired,
  }

  static contextTypes = {
    router: React.PropTypes.object.isRequired,
  }

  constructor() {
    super();

  }

  showModal () {
    this.refs.modal.show();
  }



  render() {
    return (
      <div>
        <Headroom>
          <Nav showModal={this.showModal}/>
        </Headroom>
        <Modal ref="modal" modalStyle={modalStyle} contentStyle={contentStyle} backdropStyle={backdropStyle}>
          <form>
            <label>Name:</label>
            <input type="text"/>
            <label>Email:</label>
            <input type="email"/>
            <label>Message:</label>
            <input type="text-area"/>
            <input type="submit" placeholder="Submit" />
          </form>
        </Modal>
        {this.props.children}
      </div>
    );
  }
}

从“React”导入React；
从“反应路由器”导入{Link}；
从“盖茨比助手”导入{prefixLink}；
从'config'导入{config}；
从“反应净空”导入净空；
从“/Nav.js”导入导航；
导入“../css/main.scss”；
从“硼/滴落模式”导入模式；
常数modalStyle={
最小高度：“500px”，
背景颜色：“#303841”
};
常量backdropStyle={
背景颜色：“#F6C90E”
};
常量contentStyle={
背景颜色：“#303841”，
填充：“3rem”
};
导出默认类RootTemplate扩展React.Component{
静态类型={
位置：React.PropTypes.object.isRequired，
子项：React.PropTypes.object.isRequired，
}
静态上下文类型={
路由器：React.PropTypes.object.isRequired，
}
构造函数（）{
超级（）；
}
showModal（）{
this.refs.modal.show（）；
}
render（）{
返回(
姓名：
电邮：
信息：
{this.props.children}
);
}
}

和我的Nav.js文件：

import React from 'react';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';



import { Nav, NavGroup, NavItem, NavToggle, Icon } from 're-bulma';



export default class nav extends React.Component {
  static propTypes = {
    name: React.PropTypes.string,
  };

  constructor(props) {
    super(props);
  }



  render() {
    return (
      <div>
        <Nav>
          <NavGroup align="left">
            <NavItem>
              <Link to={prefixLink('/')}>
              <h2>Dillon Raphael</h2>
              </Link>
            </NavItem>
          </NavGroup>

          <NavToggle />

          <NavGroup align="right" isMenu>
            <NavItem>
            </NavItem>
            <NavItem>
            </NavItem>
            <NavItem>
              <a href="#" onClick={::this.props.showModal}>Let's Work!</a>
            </NavItem>
          </NavGroup>
        </Nav>



      </div>
    );
  }
}

从“React”导入React；
从“反应路由器”导入{Link}；
从“盖茨比助手”导入{prefixLink}；
从're bulma'导入{Nav，NavGroup，NavItem，NavToggle，Icon}；
导出默认类nav.Component{
静态类型={
名称：React.PropTypes.string，
};
建造师（道具）{
超级（道具）；
}
render（）{
返回(
狄龙·拉斐尔
);
}
}

---

请注意

这是我试图调用showmodel函数的地方，我从

\u template.js

文件中传递了该函数。

添加到构造函数中，在\u template.js文件中，此代码：

this.showModal = this.showModal.bind(this);

然后，构造函数应该如下所示：

constructor(props) {
    super(props);
    this.showModal = this.showModal.bind(this);
}

---

ref

不存在，但是为什么还要将

ref

传递给

Modal

呢

Modal

采用了

show

的

prop

，那么为什么不直接使用它而不是提出另一种解决方案呢？@lux它说在文档中使用ref。你是说只做这个.modal.show（）吗？对不起，我以为这是一个

react引导

modal，这很常见。从

borbon

看不到这一点，这是有效的！我想把它绑在导航文件里。谢谢