如何在react.js中从child调用grandparent（）？

Question

我试图提交表单并直接调用loadDataFromServer()函数，以便我不必刷新以获取 最新数据。 如何调用直接在<WebPage />？

范围内的此方法

码

<WebPage />
{
  loadDataFromServer:function()
   {

   }

<MainView />
{
<Post> </Post>
<CommentForm  onCommentSubmit={this.loadDataFromServer}/>
}

var CommentForm = React.createClass({
myFunction:function(e)
{

e.preventDefault();
var comm = (React.findDOMNode(this.refs.text).value.trim());

this.handleCommentSubmit(comm);

React.findDOMNode(this.refs.text).value = '';
return;
},

render:function(){

return(
<div>
<form className="commentForm" onSubmit={this.myFunction}>
    <input className="inputText1" type="text" placeholder="Please Enter Your Comment Here ...." ref="text" /><br /><br />
    <input className="Submit1" type="submit" value="Post" />
</form>

    <input type="search" className="hiddenElement" value={this.props.s} ref="pleaseshow" />
    </div>
);
}
});
}

Answer 1

将函数loadDataFromServer()作为树下的支柱传递给您希望访问它的子组件。

class Webpage extends React.Component{
  loadDataFromServer(){
    // Load data from server
  }
  render(){
    return(
      <MainView loadDataFromServer={loadDataFromServer}/>
    )
  }
}

class MainView extends React.Component{
  render(){
    return(
      <CommentForm loadDataFromServer={this.props.loadDataFromServer}/>
    )
  }
}

class CommentForm extends React.Component{
  myFunction(){
    // Do something
    this.props.loadDataFromServer();
  }
  render(){
    return(
      // Some JSX
    )
  }
}

Answer 2

理想情况下，你需要Flux。但至少我建议对@ naisheel-verdhan提出的解决方案稍作修改 -

在CommentForm中，不是将prop命名为＆＃34; loadDataFromServer＆＃34;，而是将其重命名为＆＃34; onCommentSubmit＆＃34;。这样，您的CommentForm组件就不会与数据提取紧密相关。