Javascript 无法获取属性'；测试'；指未定义的或空的引用

我使用ES6与React一起使用，引用似乎不是在玩球

export default class App extends React.Component {
  test() {
    console.log(React.refs.test);
  }
  render() {
    return (
      <div className="pure-g">
        <Nav>
          <NavButton onClick={this.test}>Test</NavButton>
        </Nav>
        <Map lat="53.15" lng="-0.5" zoom="9" />
        <SearchMenu ref="test" />
      </div>
    );
  }
}

导出默认类App扩展React.Component{
测试（）{
控制台日志（React.refs.test）；
}
render（）{
返回(
试验
);
}
}

我是否错误地使用了refs

另一方面，当页面加载时，我的onClick事件突然发生。这是我的按钮组件

export default class NavButton extends React.Component {
  render() {
    return (
      <li className="pure-menu-item" onClick={this.props.onClick}>
        <a className="pure-menu-link">{this.props.children}</a>
      </li>
    );
  }
}

test() {
  console.log(this); //this will be your App Component
}

导出默认类NavButton扩展React.Component{
render（）{
返回(

{this.props.children}

);
}
}

引用在组件实例上可用，而不是静态地在

React

本身上可用。您的ref应该由

this.refs.test

引用，而不是

React.refs.test

。这给您的示例带来了另一个问题—单击事件回调不会在正确的上下文中调用。您可以通过绑定传递给按钮组件的函数来解决此问题：

export default class App extends React.Component {
  test() {
    console.log(this.refs.test);
  }
  render() {
    return (
      <div className="pure-g">
        <Nav>
          <NavButton onClick={this.test.bind(this)}>Test</NavButton>
        </Nav>
        <Map lat="53.15" lng="-0.5" zoom="9" />
        <SearchMenu ref="test" />
      </div>
    );
  }
}

导出默认类App扩展React.Component{
测试（）{
console.log（this.refs.test）；
}
render（）{
返回(
试验
);
}
}

将您的

更改为此

测试

现在，测试函数中的

将成为组件

export default class NavButton extends React.Component {
  render() {
    return (
      <li className="pure-menu-item" onClick={this.props.onClick}>
        <a className="pure-menu-link">{this.props.children}</a>
      </li>
    );
  }
}

test() {
  console.log(this); //this will be your App Component
}

至于为什么你的点击会在加载时触发，我要确保你没有意外地调用onClick函数：

this.props.onClick（）
而不是
this.props.onClick
试试这里是否有简写this.test.bind（这个）？es6似乎无缘无故地过于复杂，除了es6功能之外，实际上还有什么好处吗？@Jacob Mason您可以使用arrow function
onClick={（）=>this.test（）}
或者您可以使用类属性
test=（）=>{…}
，目前ES2017正在审查中，但是巴贝尔已经有了一个很好的转变。但这个答案并不能解决问题，这实际上是
React.refs的错误实现