Javascript 如何从父组件调用子组件中的函数

单击Blog.js中呈现的按钮时，我想调用Blogpostreader.js中的函数showExtraBlogposts（）

我尝试用onClick={blogpostreard.showExtraBlogposts（）}调用它，它返回showExtraBlogposts（）不是Blogpostreader的函数

import React from 'react';
import axios from 'axios';
import Blogpost from './Blogpost.js';

class BlogpostReader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      blogposts: [],
      blogpostAmount: "",
      counter: 1,
      renderedBlogposts: []
    };
  }

  componentDidMount() {
    //API call
  }

  renderBlogpost(i) {
    // Single blogpost rendered
  }

  showExtraBlogposts() {
    for(this.state.counter; this.state.counter < (this.state.blogpostAmount + 2); this.state.counter++) {
      this.state.renderedBlogposts.push(
        <div key={this.state.blogposts[this.state.counter].id} className="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 whole-blogpost">
          {this.renderBlogpost(this.state.blogposts[this.state.counter])}
        </div>)
    }
    this.forceUpdate();
  }

  render() {
    this.state.blogpostAmount = this.state.blogposts.length;
    for (this.state.counter; this.state.counter < this.state.blogpostAmount && this.state.counter < 5; this.state.counter++) {
      this.state.renderedBlogposts.push(
        <div key={this.state.blogposts[this.state.counter].id} className="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 whole-blogpost">
          {this.renderBlogpost(this.state.blogposts[this.state.counter])}
        </div>)
    }
    return this.state.renderedBlogposts;
  }
}

export default BlogpostReader;

从“React”导入React；
从“axios”导入axios；
从“./Blogpost.js”导入Blogpost；
类BlogpostReader扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
博客帖子：[]，
blogpostAmount:“”，
柜台:1,，
renderedBlogposts:[]
};
}
componentDidMount（）{
//API调用
}
renderBlogpost（一）{
//单博客文章
}
showExtraBlogposts（）{
for（this.state.counter；this.state.counter<（this.state.blogpostaunt+2）；this.state.counter++）{
this.state.renderedBlogposts.push(
{this.renderBlogpost（this.state.blogposts[this.state.counter]）文件]
)
}
这个.forceUpdate（）；
}
render（）{
this.state.blogpostmount=this.state.blogposts.length；
对于（this.state.counter；this.state.counter

我的博客组件如下所示：

import React from 'react';
import BlogpostReader from './BlogpostReader.js';
import BlogpostWriter from './BlogpostWriter.js';

class Blog extends React.Component {  
  render() {
    return (
      <div className="row">
        <div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div className="wrap">
            <BlogpostWriter className="blogpost-writer"/>
          </div>
        </div>
        <div className="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div className="wrap">
            <div className="row">
              <BlogpostReader />
            </div>
            <div className="centered-button">
              <button className="styled-button">Meer laden</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}


export default Blog;

从“React”导入React；
从“./BlogpostReader.js”导入BlogpostReader；
从“./BlogpostWriter.js”导入BlogpostWriter；
类Blog扩展了React.Component{
render（）{
返回(
米尔·拉登
);
}
}
导出默认博客；

我如何解决这个问题

编辑

---

我修改了组件，以便BlogpostReader呈现按钮。我应该能够调用showExtraBlogposts（）方法，但它总是给我一个错误，因为我的应用程序即使不单击按钮也会运行该方法。。。如何解决此问题？

使用回调传递数据，在reactjs中不允许在父级中使用子函数

---

您不能真正从父组件调用子方法。执行此操作的“反应方式”是在父组件中，在状态中存储一个布尔值以跟踪它是否应该显示，然后通过子组件的道具将该布尔值传递给子组件。

反应基于单向数据绑定的思想，这意味着父组件跟踪状态并通过道具传递状态和函数。这意味着父组件不能从子组件调用函数，为此，您需要使用其他库，如Redux