如何在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 {

是您忘記要做的事情，也許是對類本身的調用。 希望此解決方案可以對您有所幫助！