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>
)
}

点击酒店按钮，在topbar.js文件中定义的hotelsClick函数中，我希望能够获取＆＃39; / hotels＆＃39;来自后端的（或其他一些页面），并在App.js中将其显示在div中（或者只保存在状态中）。这样做的正确方法是什么？

Answer 1

这不是首选或最好的方法，但是如果你想这样尝试，你可以在App组件中获取数据，通过props将数据传递给toolBar然后你可以访问topBar组件中的数据。事件处理程序也应该通过props传递给App中的回调main方法。

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..
    )
}

Reactjs从快速后端获取数据

1 个答案: