如何在ReactJs中从另一个调用类函数

Question

我有两个班级的俱乐部，俱乐部和主要的应用程序类。 在clubs类中，我会得到一个俱乐部列表，并在<ul>列表中显示它们。 在club课程中，我尝试从俱乐部列表中获取单击项的详细信息。 问题的关键是，我不知道怎么称呼存在于细节函数club在类clubs类。

详细信息如下：

俱乐部班：

import React, { Component } from 'react';

const clubData = id => `urlto`

class Club extends Component {

constructor(props) {
super(props)
this.state = {
  requestFailed: false
}
// This binding is necessary to make `this` work in the callback
this.clubDetail = this.clubDetail.bind(this);
}

clubDetail(id) {
console.log('karim')
{/*fetch(clubData(id)
  .then(response => {
    if (!response.ok) {
      throw Error("Failed connection to the API")
    }

    return response
  })
  .then(response => response.json())
  .then(response => {
    this.setState({
      club: response
    })
  }, () => {
    this.setState({
      requestFailed: true
    })
  })*/}
}

render() {
if(!this.state.club) return <h1>No club selected !</h1>
return (
  <ul>
    <li>Name : {this.state.club.name}</li>
    <li>Email : {this.state.club.email}</li>
    <li>Website : {this.state.club.website}</li>
  </ul>
);
 }
}

 export default Club;

俱乐部班：

import React, { Component } from 'react';

const clubsList = `urlto`


class Clubs extends Component {

constructor(props) {
super(props)
this.state = {
  requestFailed: false
}
}

componentDidMount() {
fetch(clubsList)
  .then(response => {
    if (!response.ok) {
      throw Error("Failed connection to the API")
    }

    return response
  })
  .then(response => response.json())
  .then(response => {
    this.setState({
      clubs: response
    })
  }, () => {
    this.setState({
      requestFailed: true
    })
  })
 }

 render() {
if(!this.state.clubs) return <h1>No results</h1>
return (
  <div>
    <ul>
    {this.state.clubs.map(function(item) {
        return <a key={item.id} onClick={Club.clubDetail(item.id)}><li key={item.id}>{item.name}</li></a>
    })}
    </ul>
  </div>
);
}
}

export default Clubs;

在onClick道具中，我进行了此调用{Club.clubDetail(item.id)}但似乎不起作用

主要应用类别：

  class App extends Component {
   render() {
return (
  <div className="App">
    <div className="App-left-side">
      <Clubs></Clubs>
    </div>
    <div className="App-center-side">
      <div className="App-center-side-content">
      <Club></Club>
      </div>
    </div>
  </div>
);
 }
 }

export default App;

Answer 1

由于Clubs和Club组件仅用于替换数据，因此我建议从App组件进行api调用，并将数据与onClick函数一起传递给Clubs组件。 每当用户单击任何项​​目时，请将ID传递给父项，并在Club组件中替换所单击项目的详细信息。

像这样：

应用组件：

const clubsList = `urlto`;

class App extends Component {

    constructor(props) {
        super(props)
        this.state = {
            requestFailed: false,
            clubs: [],
            club: {}
        }
    }

    componentDidMount() {
        fetch(clubsList)
        .then(response => {
            if (!response.ok) {
                throw Error("Failed connection to the API")
            }
            return response
        })
        .then(response => response.json())
        .then(response => {
            this.setState({
                clubs: response
            })
        }, () => {
            this.setState({
                requestFailed: true
            })
        })
    }

    click = (id) => {
        console.log('clicked item', id);
    }

    render() {
        return (
            <div className="App">
                <div className="App-left-side">
                    <Clubs clubs={this.state.clubs} clicked={this.click}/>
                </div>
                <div className="App-center-side">
                    <div className="App-center-side-content">
                        <Club club={this.state.club}/>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

俱乐部组成部分：

class Clubs extends Component {

    render() {
        if(!this.props.clubs.length) return <h1>No results</h1>

        return (
            <div>
                <ul>
                    {this.props.clubs.map((item) => {
                        return <a key={item.id} onClick={() => this.props.clicked(item.id)}>
                                  <li key={item.id}>{item.name}</li>
                              </a>
                    })}
                </ul>
            </div>
        );
    }
}

export default Clubs;

俱乐部组成：

class Club extends Component {

    render() {
        if(!Object.keys(this.props.club)) return <h1>No club selected !</h1>;

        return (
            <ul>
                <li>Name : {this.props.club.name}</li>
                <li>Email : {this.props.club.email}</li>
                <li>Website : {this.props.club.website}</li>
            </ul>
        );
    }
}

export default Club;

Answer 2

为了使reactjs使用另一个类，您需要将其导出 ：

export default class Club extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      name: '',
      password: ''
    };
  };
}

请记住， React.createClass有一个内置的神奇功能，所有结合的方法，以this为您自动。 对于不习惯在其他类中使用此功能的JavaScript开发人员来说，这可能会有些混乱，或者当他们从React移到其他类时，可能会造成混乱。

正确使用功能 ：

class Clubs extends React.Component {
  Club = () => {
    ...
  }
  ...
}

基本上说：

export default class Club extends Component {

是您忘记要做的事情，也许是对类本身的调用。 希望此解决方案可以对您有所帮助！