Reactjs извлекает данные из экспресс-бэкэнда

Question

В настоящее время я изучаю реагирование с бэкэндом expressjs. В настоящее время я могу получить данные о загрузке страницы с помощью componentWillMount ();

//APP.JS
componentWillMount() {
    fetch('/hotels')
      .then(res => res.json())
      .then((result) => {
        this.getHotels(result);
      });
}

это отлично работает.

Теперь я создал компонент с именем topbar, который в основном отображает заголовок навигации (как переполнение стека или Facebook). в topBar.js у меня есть:

//topbar.js
const topBar = () => {
return(
    <div className="topBar">
        <input type="image" className="logo"  src={logo} onClick = {logoClick} alt = "Trip Advisor"/>
        <button className="buttonStyle" onClick = {hotelsClick}>Hotels</button>
        <button className="buttonStyle" onClick = {vRentalClick}>Vacation Rentals</button>
        <button className="buttonStyle">Flights</button>
        <button className="buttonStyle">Cafés</button>
        <button className="buttonStyle" disabled></button>
        <button className="buttonStyle">My Trips</button>
        <button className="buttonStyle" onClick = {join}>Join</button>
    </div>
)
}

При нажатии на кнопку отелей в функции hotelsClick, определенной в файле topbar.js, я хочу иметь возможность получить '/ hotels' (или некоторую другую страницу) из бэкэнда и отобразить его в div (или просто сохранить в состоянии) в App.js. Как правильно это сделать?

Answer 1

Это не предпочтительный или лучший способ сделать это, но если вы хотите попробовать это так, вы получите данные в компоненте App, передадите данные в toolBar через реквизиты, а затем получите доступ к данным в компоненте topBar. Также обработчики событий должны передаваться через реквизиты, чтобы также вызывать метод main в App.

class App extends React.PureComponent {
    constructor() {
      this.state = {data: null};
      this.hotelsClick = this.hotelsClick.bind(this);
    }    
    componentWillMount() {
       // get data, place it in state
       fetch('/hotels')
        .then(res => res.json())
        .then((result) => {
           this.setState(data:this.getHotels(result));
       });
   }
   hotelsClick() {
      //callback function
   }
   render() {
       const {data} = this.state;
       return(
           <topBar data={data} hotelsClick="this.hotelsClick"  />

        ... etc
       )
    }
};

//topbar.js
const topBar = () => {
    return(
      <div className="topBar">
        <input type="image" className="logo"  src={this.props.data.logo}  />
      <button className="buttonStyle" onClick = {this.props.hotelsClick()}>Hotels</button>
      </div>
      // etc..
    )
}