просто сделать запрос в родительском компоненте, ничего не рендерить и отправить все данные как реквизиты - PullRequest
Новая
       5

просто сделать запрос в родительском компоненте, ничего не рендерить и отправить все данные как реквизиты

1 голос
/ 24 мая 2019

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

               {
                   ({loading,error,data}) =>{
                     if(loading) return <h4>Loading...</h4>
                       if(error) console.log(error)
                       console.log("graphql data is ",data);

                       return(
                       <div className="body">
                                  </div>


                               </div>


                       );
                 }
               }

              </Query>

Я хочу сделать этот запрос в моем родительском компоненте и передать его как дочерние компоненты.В случае простого API, я мог бы просто вызвать API и сохранить его в своем редуксе, а затем получить эти данные в качестве реквизита для ребенка.Как этого можно добиться, ничего не рендерив?

1 Ответ

0 голосов
/ 26 мая 2019

Вы можете создать компонент только для визуализации его дочерних элементов.Вот пример того, как сделать это в реакции.

Примерно так. 

class Query extends Component {
  state = {
    loading: true,
    error: {},
    data: {}
  }
  componentDidMount() {
    //do the apicall here
    this.setState({ loading: false, data: { header: "may the force be with you" } });
  }

  render() {
    const { state: props, props: { children } } = this;

    // return the data here
    // passing state as props here after renaming state to props
    return children(props);
  }
}

Использование режима реакции вместо редукса.Вы можете сделать этот подключенный компонент, если вы хотите использовать Redux.И использовать компонент, как это. 

    <Query>
      {
        ({ loading, error, data }) => {
          if (loading) return <>Loading.......</>
          if (Object.keys(error).length > 0) return <>Some Error Handler</>
          if (data) return (
            <>
              <img src={logo} className="App-logo" alt="logo" />
              <a
                className="App-link"
                href="https://reactjs.org"
                target="_blank"
                rel="noopener noreferrer"
              >
                {data.header}
              </a>
            </>
          )
        }
      }
    </Query>
...