react - expose component function - components

Question

How do I access in React, a method of one component in other components, that are not in a direct parent-child relation? For example:
var QuestionsBox = React.createClass({
**editQuestion**: function(questionId){
// do something
// this.refs.mainForm.loadQuestionFromServer.bind(this, questionId);
},
getInitialState: function() {
return {data: []};
},
render: function() {
return (
<div className="questionsBox">
<h4>Questions</h4>
<QuestionsList data={this.state.data}/>
</div>
);
}
});
var QuestionsList = React.createClass({
render: function() {
var reactObject = this;
var questionsList = this.props.data.map(function (question) {
return (
<Question id={question.id}>
{question.question_name}
</Question>
);
});
return (
<div>
{questionsList}
</div>
);
}
});
var Question = React.createClass({
render: function() {
return(
<div className="question">
{this.props.children}
<a onClick={**access here editQuestion method of QuestionsBox component, with parameters**}>edit</a>
</div>
);
}
});
or other similar structures, that do not have a direct parent-child relation..

Answer 1

You need to pass it down as a prop
var QuestionsBox = React.createClass({
**editQuestion**: function(questionId){
// do something
// this.refs.mainForm.loadQuestionFromServer.bind(this, questionId);
},
getInitialState: function() {
return {data: []};
},
render: function() {
return (
<div className="questionsBox">
<h4>Questions</h4>
<QuestionsList
data={this.state.data}
editQuestion={this.editQuestion}
/>
</div>
);
}
});
var QuestionsList = React.createClass({
render: function() {
var reactObject = this;
var questionsList = this.props.data.map(function (question) {
return (
<Question>
id={question.id}
editQuestion={this.props.editQuestion}
{question.question_name}
</Question>
);
});
return (
<div>
{questionsList}
</div>
);
}
});
var Question = React.createClass({
render: function() {
return(
<div className="question">
{this.props.children}
<a id={this.props.id} onClick={this.editQuestion}>edit</a>
</div>
);
},
editQuestion: function(e) {
this.props.editQuestion(e.target.id);
}
});

Answer 2

Create a separate storage class. Embed the instance of that class in each place that has access to editing the data it contains. You see this in Flux, Facebook's architecture library. Instead of passing down handlers, have the events be emitted from the Storage class, and have each component subscribe to that instance of the storage class.
It's hard to describe, but that link has a video which will make it very clear. This way, any time data changes the store will trigger events which will trigger re-renders of your react views.