Реагировать компонент, чтобы вернуть что-то кроме jsx

Question

Я пытаюсь провести рефакторинг некоторого кода, написанного кем-то другим, и мне было интересно, возможно ли следующее.я могу создать компонент реагирования, который возвращает не HTML или JSX?и возвращает функцию или что-то еще?

в основном компонент на данный момент содержит 4 функции, а затем блок возврата, который возвращает некоторый jsx, который будет обработан

Я хочу извлечь 2 из этих функций в ихсобственный компонент, так как они похожи и могут быть повторно использованы

однако эти функции просто делают вызовы ajax и вызывают другие функции, а не возвращают какой-либо jsx.им также требуются подпорки внутри них, и они должны быть либо переданы, либо подключены к хранилищу резервов. Некоторые функции, которые он вызывает, являются диспетчерскими функциями и, следовательно, ДОЛЖНЫ быть подключены к хранилищу резервов.поэтому я не могу создать отдельную функцию

имеет ли это смысл или я что-то упустил.приведенный ниже псевдокод для демонстрации:

const component = ({...props}) => {
   const func1(){
     prop1()
     try{

     } catch(){
      callingAnotherProp()
     }
   }

   const func2(){

   }

   const func3(){

   }

   const func4(){

   }
}

представьте, func1 и func2 идентичны.и как вы видите, они не возвращают jsx, просто делают дальнейшие звонки.Я не думаю, что смогу выделить в функцию sep.Я бы предпочел не передавать реквизиты как аргументы, а просто подключить функцию к хранилищу и использовать таким образом.это возможно?

Answer 1

Не уверен, что я полностью понимаю вашу цель здесь, но из того, что я понимаю, вам нужен компонент, который будет извлекать данные и предоставлять его другим компонентам (или дочерним компонентам?).
Существует хороший шаблон, называемый Дети как функция (или рендеринг реквизита) .

По сути, вы обрабатываете дочерние элементы, переданные компоненту, как функцию, и вы можете передавать функции все что угодно (выборочные данные в вашем случае).

return this.children(this.state.data)

Вот небольшой пример:

class Fetcher extends React.Component {
  state = { result: { data: [] } };

  componentDidMount() {
    const { url } = this.props;
    fetch(url)
      .then(response => response.json())
      .then(data => this.setState({ result: { data } }))
      .catch(err => this.setState({ result: { error: true, message: err } }));
  }

  render() {
    const { children } = this.props;
    return children(this.state.result);
  }
}

class App extends React.Component {
  renderUsers = users => users.map(user => <div>{user.name}</div>);

  render() {
    return (
      <div>
        <Fetcher url={"https://jsonplaceholder.typicode.com/users"}>
          {response => (
            <div>
              {response.data.length
                ? this.renderUsers(response.data)
                : "Loading..."}
            </div>
          )}
        </Fetcher>
      </div>
    );
  }
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"/>

Answer 2

А как насчет HOC?Вы можете создать компонент с помощью метода func1(), и функция render этого компонента просто вернет {this.props.children}.

Два других параметра - это отдельная функция (вам это не нравится) инаследство (мне это не нравится).