小编jav*_*edb的帖子

目前，我有一个 BooksList 组件，当单击标题时，我会将 props 传递给我的 BooksDetails 组件。如何使用 Apollo 挂钩仅查询 props 更改？

我不知道如何使用钩子来做到这一点。我浏览了 Apollo 的 UseQuery 文档。我找不到有关 UseLazyQuery 的文档。

我尝试了以下方法，但它总是返回未定义：

const { loading, error, data } = useQuery(getBookQuery, {
    options: (props) => {
      return {
        variables: {
          id: props.bookId
        }
      }
    }
  })

图书清单：

const BookList = () => {
  const {loading, error, data} = useQuery(getBooksQuery)
  const [selectedId, setId] = useState('');


  return (
    <div id='main'>
      <ul id='book-list'>
        {data && data.books.map(book => (
          <li onClick={() => setId(book.id)} key={book.id}>{book.name}</li>
        )) }
      </ul>
      <BookDetails …

我有一个容器 div，里面有 2 个跨度。当我尝试align-items: center我失去了height和border-radius跨度的。我希望它们保持高度和边界半径，而只是居中。我怎样才能做到这一点？

父 div 的 CSS：

const Container = styled.div`
  display: inline-flex;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 8px 10px 8px;
  height: 70px;
`;

子跨度的CSS：

const TextContainer = styled.span`
  padding: 8px 11px;
`;

之前align-items: center：

之后align-items: center：