Question

我有两个班级俱乐部，俱乐部和主要应用课程。在俱乐部课程中，我得到了俱乐部列表，我正在<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)}，但似乎无法正常工作

主app类：

  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组件仅用于替换数据，因此我建议从api组件进行App调用，并将数据传递给Clubs组件以及onClick函数。每当用户点击任何项目时，将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：

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

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

请记住React.createClass有一个内置的魔术功能，可以自动将所有方法绑定到this。对于那些在其他类中不习惯此功能的JavaScript开发人员来说，这可能会有些混乱，或者当他们从React迁移到其他类时会让人感到困惑。

正确使用feature：

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

基本上说：

export default class Club extends Component {

你忘了做什么，也许是对班级本身的呼唤。希望这个解决方案可以帮助你！

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

2 个答案: