从外部调用React组件方法

我想从React元素的实例中调用React组件公开的方法。

例如,在这个jsfiddle https://jsfiddle.net/r6r8cp3z/我想从HelloElement引用中调用alertMessage方法。

有没有办法实现这一点,而不必编写额外的包装?

编辑 (从JSFiddle复制代码)

 <div id="container"></div> <button onclick="onButtonClick()">Click me!</button> 
 var onButtonClick = function () { //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage() console.log("clicked!"); } var Hello = React.createClass({displayName: 'Hello', alertMessage: function() { alert(this.props.name); }, render: function() { return React.createElement("div", null, "Hello ", this.props.name); } }); var HelloElement = React.createElement(Hello, {name: "World"}); React.render( HelloElement, document.getElementById('container') ); 

有两种方法可以访问内部函数。 一个是实例级别,另一个是静态级别。

你需要调用React.render返回的函数。 见下文。

静态的

看看ReactJS静力学 。 但是,请注意,静态函数不能访问实例级别的数据,所以thisundefined

 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()

我做了这样的事情:

 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={this.cowMounted.bind(this)} /> <button onClick={this.changeCow.bind(this)} /> </div> ) } cowMounted (callbacks) { this.cowCallbacks = callbacks } changeCow () { this.cowCallbacks.say('moo') } } 

我没有testing这个确切的代码,但这是我在我的一个项目中所做的行,它很好地工作:)。 当然这是一个不好的例子,你应该只是使用道具,但在我的情况下,子组件做了一个API调用,我想保留在该组件。 在这种情况下,这是一个很好的解决scheme。

您可以使用函数将onClick处理程序添加到div( onClick是React自己的onClick实现),您可以访问{ }大括号内的属性,并显示警报消息。

如果您希望定义可以在组件类上调用的静态方法,则应使用静态方法。 虽然:

“在这个块中定义的方法是静态的,这意味着你可以在任何组件实例被创build之前运行它们,并且这些方法不能访问组件的道具或者状态,如果你想检查一个静态的道具的值方法,让调用者将道具作为parameter passing给静态方法。“ ( 来源 )

一些示例代码:

  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); 

希望这可以帮助你一点,因为我不知道我是否正确理解你的问题,所以纠正我,如果我解释错了:)

它似乎静态是不赞成使用,其他方法暴露一些函数render似乎错综复杂。 同时, 这个关于debuggingReact的堆栈溢出回答 ,虽然看起来像hack-y,但为我做了这个工作。

如果你在ES6中,只需在你的方法中使用“static”关键字就可以了: static alertMessage: function() { ...
},
static alertMessage: function() { ...
},

希望可以帮助任何人在那里:)