Javascript 使用高阶组件时绑定onClick

可能是个新问题。我是新来的

在写了一些博客文章之后，我能够构建一个页面，其中包含高阶组件和

componentDidMount

，以从API加载数据并将其呈现到页面上。它工作得很好，代码看起来很干净，但是我不知道如何通过高阶组件传递某种onClick，最终我想将fetch的核心转移到一个可以由

componentDidMount

和

Reload

调用的函数中。哈尔普酒店

import React, { Component } from 'react';
import {Button, CardColumns, Card, CardHeader, CardBody} from 'reactstrap';

const API = 'http://localhost:3000/';
const DEFAULT_QUERY = 'endpoint';

const withFetching = (url) => (Comp) =>
  class WithFetching extends Component {
    constructor(props) {
      super(props);

      this.state = {
        data: {},
        isLoading: false,
        error: null,
      };

      // Goes here?
      this.onClick = () => {
        console.log("Handled!");
      };
    }

    componentDidMount() {
      this.setState({ isLoading: true });

      fetch(url)
        .then(response => {
          if (response.ok) {
            return response.json();
          } else {
            throw new Error('Something went wrong ...');
          }
        })
        .then(data => this.setState({ data, isLoading: false }))
        .catch(error => this.setState({ error, isLoading: false }));
    }

    // Or here maybe??
    this.onClick = () => {
      console.log("Handled!");
    };

    render() {
      // How do I pass it in?
      return <Comp { ...this.props } { ...this.state } onClick={this.onClick} />
    }
  }

// How do I tell this component to expect it to recieve the handler?
const App = ({ data, isLoading, error }) => {
  const hits = data.hits || [];
  console.log(data);

  if (error) {
    return <p>{error.message}</p>;
  }

  if (isLoading) {
    return <p>Loading ...</p>;
  }

  return (
    <div className="animated fadeIn">
      <CardColumns className="cols-2">
        <Card>
          <CardHeader>
            API Card!
            <div className="card-actions">
            </div>
          </CardHeader>
          <CardBody>
            {hits.map(hit =>
              <div key={hit.foo}>
                <h3>{hit.foo}</h3>
                _____
              </div>
            )}

            <Button onClick={props.onClick}>Launch demo modal</Button>

          </CardBody>
        </Card>
      </CardColumns>
    </div>
  );
}

export default withFetching(API + DEFAULT_QUERY)(App);

import React，{Component}来自'React'；
从“reactstrap”导入{Button，CardColumns，Card，CardHeader，CardBody}；
常数API=http://localhost:3000/';
const DEFAULT_QUERY='endpoint'；
常量withFetching=（url）=>（Comp）=>
使用获取扩展组件初始化{
建造师（道具）{
超级（道具）；
此.state={
数据：{}，
孤岛加载：false，
错误：null，
};
//去这里？
this.onClick=（）=>{
log（“已处理！”）；
};
}
componentDidMount（）{
this.setState（{isLoading:true}）；
获取（url）
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（'出了问题…'）；
}
})
.then（data=>this.setState（{data，isLoading:false}））
.catch（error=>this.setState（{error，isLoading:false}））；
}
//或者在这里？？
this.onClick=（）=>{
log（“已处理！”）；
};
render（）{
//我怎么把它传进来？
返回
}
}
//我如何告诉这个组件期望它接收处理程序？
常量应用=（{data，isLoading，error}）=>{
const hits=data.hits | |[]；
控制台日志（数据）；
如果（错误）{
返回{error.message}
；
}
如果（孤岛加载）{
返回加载…
；
}
返回(
API卡！
{hits.map（hit=>
{hit.foo}
_____
)}
启动演示模式
);
}
使用抓取导出默认值（API+默认查询）（应用程序）；

是引导我使用的架构的博客帖子：

---

编辑：我可以在类外创建一个函数，这样它在任何地方都可用，但我最初想保留它的原因是，这样我就可以实际更改状态，并用新数据重新渲染卡。正在试图找出如何正确使用

bind（）

使其正常工作。。。JS有时让我觉得自己很笨：p

你有没有考虑过让函数成为所有类之外的根级别函数？然后任何组件都可以调用它

例如：

import React, { Component } from 'react';
import {Button, CardColumns, Card, CardHeader, CardBody} from 'reactstrap';

const API = 'http://localhost:3000/';
const DEFAULT_QUERY = 'endpoint';

function sharedUtilityFunction(){
   // Do something here
}

const withFetching = (url) => (Comp) =>
  class WithFetching extends Component {
    constructor(props) {
      super(props);

      this.state = {
        data: {},
        isLoading: false,
        error: null,
      };

    }

    componentDidMount() {

      sharedUtilityFunction();

      this.setState({ isLoading: true });

      fetch(url)
        .then(response => {
          if (response.ok) {
            return response.json();
          } else {
            throw new Error('Something went wrong ...');
          }
        })
        .then(data => this.setState({ data, isLoading: false }))
        .catch(error => this.setState({ error, isLoading: false }));
    }

    render() {
      return <Comp { ...this.props } { ...this.state } />
    }
  }

// How do I tell this component to expect it to recieve the handler?
const App = ({ data, isLoading, error }) => {
  const hits = data.hits || [];
  console.log(data);

  if (error) {
    return <p>{error.message}</p>;
  }

  if (isLoading) {
    return <p>Loading ...</p>;
  }

  return (
    <div className="animated fadeIn">
      <CardColumns className="cols-2">
        <Card>
          <CardHeader>
            API Card!
            <div className="card-actions">
            </div>
          </CardHeader>
          <CardBody>
            {hits.map(hit =>
              <div key={hit.foo}>
                <h3>{hit.foo}</h3>
                _____
              </div>
            )}

            <Button onClick={() => sharedUtilityFunction()}>Launch demo modal</Button>

          </CardBody>
        </Card>
      </CardColumns>
    </div>
  );
}

export default withFetching(API + DEFAULT_QUERY)(App);

import React，{Component}来自'React'；
从“reactstrap”导入{Button，CardColumns，Card，CardHeader，CardBody}；
常数API=http://localhost:3000/';
const DEFAULT_QUERY='endpoint'；
函数sharedUtilityFunction（）{
//在这里做点什么
}
常量withFetching=（url）=>（Comp）=>
使用获取扩展组件初始化{
建造师（道具）{
超级（道具）；
此.state={
数据：{}，
孤岛加载：false，
错误：null，
};
}
componentDidMount（）{
sharedUtilityFunction（）；
this.setState（{isLoading:true}）；
获取（url）
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（'出了问题…'）；
}
})
.then（data=>this.setState（{data，isLoading:false}））
.catch（error=>this.setState（{error，isLoading:false}））；
}
render（）{
返回
}
}
//我如何告诉这个组件期望它接收处理程序？
常量应用=（{data，isLoading，error}）=>{
const hits=data.hits | |[]；
控制台日志（数据）；
如果（错误）{
返回{error.message}
；
}
如果（孤岛加载）{
返回加载…
；
}
返回(
API卡！
{hits.map（hit=>
{hit.foo}
_____
)}
sharedUtilityFunction（）}>启动演示模式
);
}
使用抓取导出默认值（API+默认查询）（应用程序）；

我所寻找的答案确实是将函数作为道具传递给低阶组件。为此，我需要更改compent期望参数的方式：

const-App=props=>{

TBD，无论是否有其他重新循环，但我认为状态已经被传递到了一个prop…正确调用函数会导致

isLoading

render，这是一个好迹象

import React, { Component } from 'react';
import {Button, CardColumns, Card, CardHeader, CardBody} from 'reactstrap';

const API = 'http://localhost:3000/';
const DEFAULT_QUERY = 'endpoint';

const withFetching = (url) => (Comp) =>
  class WithFetching extends Component {
    constructor(props) {
      super(props);

      this.state = {
        data: {},
        isLoading: false,
        error: null,
      };

      this.goFetch = this.goFetch.bind(this);
    }

    goFetch() {
      this.setState({ isLoading: true });
      fetch(url)
        .then(response => {
          if (response.ok) {
            return response.json();
          } else {
            throw new Error('Something went wrong ...');
          }
        })
        .then(data => this.setState({ data, isLoading: false }))
        .catch(error => this.setState({ error, isLoading: false }));
    }

    componentDidMount() {
      this.goFetch();
    }

    render() {
      return <Comp { ...this.props } { ...this.state } goFetch={this.goFetch}/>
    }
  }

const App = props => {
  const hits = props.data.hits || [];

  if (props.error) {
    return <p>{props.error.message}</p>;
  }

  if (props.isLoading) {
    return <p>Loading ...</p>;
  }

  return (
    <div className="animated fadeIn">
      <CardColumns className="cols-2">
        <Card>
          <CardHeader>
            API Card!
            <div className="card-actions">
            </div>
          </CardHeader>
          <CardBody>
            {hits.map((hit, index) =>
              <div key={index}>
                Foo: <h3>{hit.foo}</h3>
              </div>
            )}
            <Button onClick={props.goFetch}>Refresh</Button>
          </CardBody>
        </Card>
      </CardColumns>
    </div>
  );
}



export default withFetching(API + DEFAULT_QUERY)(App);

import React，{Component}来自'React'；
从“reactstrap”导入{Button，CardColumns，Card，CardHeader，CardBody}；
常数API=http://localhost:3000/';
const DEFAULT_QUERY='endpoint'；
常量withFetching=（url）=>（Comp）=>
使用获取扩展组件初始化{
建造师（道具）{
超级（道具）；
此.state={
数据：{}，
孤岛加载：false，
错误：null，
};
this.goFetch=this.goFetch.bind（this）；
}
goFetch（）{
this.setState（{isLoading:true}）；
获取（url）
。然后（响应=>{
if（response.ok）{
返回response.json（）；
}否则{
抛出新错误（'出了问题…'）；
}
})
.then（data=>this.setState（{data，isLoading:false}））
.catch（error=>this.setState（{error，isLoading:false}））；
}
componentDidMount（）{
this.goFetch（）；
}
render（）{
返回
}
}
const App=props=>{
const hits=props.data.hits | |[]；
如果（道具错误）{
重新