从外部调用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静力学 。 但是，请注意，静态函数不能访问实例级别的数据，所以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() 。
我做了这样的事情：
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() { ...
},
希望可以帮助任何人在那里:)
