High order components в ReactJS

110

31 июля 2019, 23:20

Пытаюсь сделать: При нажатии на кнопку, отправлялся запрос (имитировал с помощью setTimeout), и пока ожидается ответ появлялось слово "Загрузка". После соответственно вместо загрузки появляется результат запроса, в моем случае просто текст, обновляю через state. Реализую это через компоненты высшего порядка. Вот код:

import React, { Component } from 'react'; 
import { BrowserRouter as Router, Link} from 'react-router-dom'; 
 
class Btn extends Component { 
  render() { 
    return ( 
      <button onClick = {this.props.onClick}>Загрузить данные</button> 
    ) 
  } 
} 
 
const HocText = (props)=> ({ 
  render: () => ( 
    <p {...props}></p> 
  ); 
}); 
 
class Lesson extends Component { 
  state = { 
    data: '', 
  } 
 
  updateData = () => ( 
    window.setTimeout(() => (this.setState({ data: 'Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. '})), 3000); 
  ); 
 
  render() { 
    return ( 
      <div> 
        <Btn onClick={this.updateData} /> 
        <HocText to='home'>{this.state.data}</HocText> 
      </div> 
    ); 
  } 
} 
 
export default Lesson

Сам state обновляется, тем не менее компонент HocText нет. С чем это может быть связано?

Answer 1

Как-то так:

import React, { Component } from "react";
import ReactDOM from "react-dom";
class App extends Component {
  state = {
    data: '',
    loading: false,
  };
  load = () => {
    this.setState({ loading: true })
    window.setTimeout(() => this.setState({ data: 'Lorem ipsum dolor sit amet', loading: false }), 5000)
  }
  render() {
    return (
      <div>
        <button onClick={this.load}>Load data</button>
        {this.state.loading ? <p>Loading...</p> : this.state.data ? <p>{this.state.data}</p> : false}
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

UPD. Обновление после комментария, добавление HOC(High order component). По примеру автора вопроса.

import React, { Component } from "react";
import ReactDOM from "react-dom";
class Btn extends Component {
  render() {
    return (
      <button onClick={this.props.onClick}>Load data</button>
    )
  }
}
const HocText = (props) => {
  return (
    <h1 {...props}></h1>
  );
}
class App extends Component {
  state = {
    data: '',
    loading: false,
  };
  load = () => {
    this.setState({ loading: true })
    window.setTimeout(() => this.setState({ data: 'Lorem ipsum dolor sit amet', loading: false }), 5000)
  }
  render() {
    return (
      <div>
        <Btn onClick={this.load} />
        {this.state.loading ? <HocText title="Loading...">Loading...</HocText> : this.state.data ? <HocText title={this.state.data}>{this.state.data}</HocText> : false}
      </div>
    );
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);