Question

我想在父组件中进行一个查询，而不呈现任何内容，并将该数据传递到某个子组件中。我们如何在react和graphql中实现这一目标？

               {
                   ({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并将其存储在我的redux中，然后将这些数据作为props放在child中。不渲染任何内容怎么能实现？

Answer 1

您可以创建一个组件以仅渲染其子级。这是一个如何在反应中进行操作的示例。

这样的事情。

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。如果要使用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>

只是在父组件中进行查询，不呈现任何内容并将所有数据作为道具发送

1 个答案: