javascript 另一个组件中的 React JS 引用函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21054955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React JS reference function in another component
提问by user2829448
I'm trying to get a button rendered through another component to reference and/or influence the state of a different component.
我正在尝试通过另一个组件呈现一个按钮，以引用和/或影响不同组件的状态。
var Inputs = React.createClass({
getInitialState: function(){
return {count: 1};
},
add: function(){
this.setState({
count: this.state.count + 1
});
},
render: function(){
var items = [];
var inputs;
for (var i = 0; i < this.state.count; i++){
items.push(<input type="text" name={[i]} />);
items.push(<br />);
}
return (
<div className="col-md-9">
<form action="/" method="post" name="form1">
{items}
<input type="submit" className="btn btn-success" value="Submit Form" />
</form>
</div>
);
}
});
I want to write a new component that will be able to access the add function in Inputs. I tried to reference it directly with Inputs.addlike this:
我想编写一个新组件，该组件将能够访问 Inputs 中的 add 函数。我试着Inputs.add像这样直接引用它：
var Add = React.createClass({
render: function(){
return (
<input type="button" className="btn" value="Add an Input" onClick={Inputs.add} />
);
}
});
But that didn't work. How would I be able to access a component's functions through another component, or influence the state of a component through another component? Thanks.
但这没有用。我怎样才能通过另一个组件访问一个组件的功能，或者通过另一个组件影响一个组件的状态？谢谢。
回答by Markus-ipse
You could accomplish this by creating a parent component that is responsible for managing the state and then just push the state down to the sub-components as props.
您可以通过创建一个负责管理状态的父组件来实现这一点，然后将状态作为道具向下推送到子组件。
/** @jsx React.DOM */
var Inputs = React.createClass({
render: function () {
var items = [];
var inputs;
for (var i = 0; i < this.props.count; i++) {
items.push( <input type="text" name={[i]} />);
items.push(<br />);
}
return (
<div className = "col-md-9">
<form action = "/" method = "post" name = "form1">
{items}
<input type="submit" className="btn btn-success" value = "Submit Form" />
</form>
</div>
);
}
});
var Add = React.createClass({
render: function () {
return (<input type = "button" className="btn" value="Add an Input" onClick={this.props.fnClick}/> );
}
});
var Parent = React.createClass({
getInitialState: function(){
return {count:1}
},
addInput: function(){
var newCount = this.state.count + 1;
this.setState({count: newCount});
},
render: function(){
return (
<div>
<Inputs count={this.state.count}></Inputs>
<Add fnClick={this.addInput}/>
</div>
);
}
});
React.renderComponent(<Parent></Parent> , document.body);
回答by Sjoerd
You can call functions on the return value of renderComponent:
您可以对以下的返回值调用函数renderComponent：
var Inputs = React.createClass({…});
var myInputs = React.renderComponent(Inputs);
myInputs.add();
The only way to get a handle to a React Component instance outside of React is by storing the return value of React.renderComponent. Source.
在 React 之外获取 React Component 实例句柄的唯一方法是存储 React.renderComponent 的返回值。来源。
