访问内部函数有两种方法: 一种是实例级，另一种是静态级。

Instance

您需要在从 React.render返回时调用该函数。

静电干扰

然而，请注意，静态函数不能访问实例级数据，因此 this应该是 undefined。

var onButtonClick = function () {
//call alertMessage method from the reference of a React Element!
HelloRendered.alertMessage();
//call static alertMessage method from the reference of a React Class!
Hello.alertMessage();
console.log("clicked!");
}


var Hello = React.createClass({
displayName: 'Hello',
statics: {
alertMessage: function () {
alert('static message');
}
},
alertMessage: function () {
alert(this.props.name);
},


render: function () {
return React.createElement("div", null, "Hello ", this.props.name);
}
});


var HelloElement = React.createElement(Hello, {
name: "World"
});


var HelloRendered = React.render(HelloElement, document.getElementById('container'));

那就做 HelloRendered.alertMessage()。

你可以通过函数向 div 添加一个 onClick处理程序(onClick是 React 自己的 onClick实现) ，你可以访问 { }花括号中的属性，然后你的警告消息就会出现。

如果您希望定义可以在组件类上调用的静态方法，那么您应该使用 static。不过:

”此块中定义的方法是静态的，这意味着您可以在创建任何组件实例之前运行它们，而且这些方法不能访问您组件的道具或状态。如果你想在静态方法中检查道具的值，让调用者将道具作为参数传递给静态方法。”(来源)

一些示例代码:

    const Hello = React.createClass({


/*
The statics object allows you to define static methods that can be called on the component class. For example:
*/
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},




alertMessage: function() {
alert(this.props.name);
},


render: function () {
return (
<div onClick={this.alertMessage}>
Hello {this.props.name}
</div>
);
}
});


React.render(<Hello name={'aworld'} />, document.body);

Hope this helps you a bit, because i don't know if I understood your question correctly, so correct me if i interpreted it wrong:)

似乎静态是不被推荐的，而用 render公开某些函数的其他方法似乎令人费解。与此同时，有关调试的堆栈溢出答案，虽然看起来像黑客一样，为我完成了这项工作。

I've done something like this:

class Cow extends React.Component {


constructor (props) {
super(props);
this.state = {text: 'hello'};
}


componentDidMount () {
if (this.props.onMounted) {
this.props.onMounted({
say: text => this.say(text)
});
}
}


render () {
return (
<pre>
___________________
< {this.state.text} >
-------------------
\   ^__^
\  (oo)\_______
(__)\       )\/\
||----w |
||     ||
</pre>
);
}


say (text) {
this.setState({text: text});
}


}

然后在别的地方:

class Pasture extends React.Component {


render () {
return (
<div>
<Cow onMounted={callbacks => this.cowMounted(callbacks)} />
<button onClick={() => this.changeCow()} />
</div>
);
}


cowMounted (callbacks) {
this.cowCallbacks = callbacks;
}


changeCow () {
this.cowCallbacks.say('moo');
}


}

我还没有测试过这段代码，但是这段代码与我在一个项目中所做的代码类似，而且运行得很好:)。当然，这是一个糟糕的示例，您应该仅仅使用道具，但是在我的示例中，子组件执行了一个 API 调用，我希望将其保留在该组件中。在这种情况下，这是一个很好的解决方案。

如果您在 ES6中，只需在您的方法上使用“ static”关键字，从示例中可以看到以下内容: < code > static alertMessage: function (){ ...
} ，

希望可以帮助任何人:)

由于 render方法可能不赞成返回值，因此建议现在将回调引用附加到根元素。像这样:

ReactDOM.render( <Hello name="World" ref={(element) => {window.helloComponent = element}}/>, document.getElementById('container'));

which we can then access using window.helloComponent, and any of its methods can be accessed with window.helloComponent.METHOD.

下面是一个完整的例子:

var onButtonClick = function() {
window.helloComponent.alertMessage();
}


class Hello extends React.Component {
alertMessage() {
alert(this.props.name);
}


render() {
return React.createElement("div", null, "Hello ", this.props.name);
}
};


ReactDOM.render( <Hello name="World" ref={(element) => {window.helloComponent = element}}/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
<button onclick="onButtonClick()">Click me!</button>

你可以这么做

import React from 'react';


class Header extends React.Component{


constructor(){
super();
window.helloComponent = this;
}


alertMessage(){
console.log("Called from outside");
}


render(){


return (
<AppBar style=\{\{background:'#000'}}>
Hello
</AppBar>
)
}
}


export default Header;

现在从这个组件的外部可以像下面这样调用

window.helloComponent.alertMessage();

class AppProvider extends Component {
constructor() {
super();


window.alertMessage = this.alertMessage.bind(this);
}


alertMessage() {
console.log('Hello World');
}
}

可以使用 window.alertMessage()从窗口调用此方法。

方法1 using ChildRef:

public childRef: any = React.createRef<Hello>();


public onButtonClick= () => {
console.log(this.childRef.current); // this will have your child reference
}


<Hello ref = { this.childRef }/>
<button onclick="onButtonClick()">Click me!</button>

public onButtonClick= () => {
console.log(window.yourRef); // this will have your child reference
}


<Hello ref = { (ref) => {window.yourRef = ref} }/>`
<button onclick="onButtonClick()">Click me!</button>