Question

我的工作index.js和post.js中有2个文件 index.js文件具有以下graphql查询。

export const query = graphql`
 query IndexPageQuery($Limit: Int) {
  allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}, limit: $Limit) {
  totalCount`}}

post.js的返回值如下：

return(          
  <div className={`all-posts ${this.props.featured ? 'featured' : ''}`}>
  <h3 className="sidebar-heading"> More Posts </h3> 
    {this.props.posts.map(({ node }) => (
    <div className="post" key={node.id}>
    <Link
        to={node.fields.slug}
        css={{ textDecoration: `none`, color: `inherit` }}
      >
      <div>
      <p>
        {node.frontmatter.title}{" "}
      </p>
      <span>— {node.frontmatter.date}</span>
      </div>
    </Link>
    </div>
  ))}

现在我无法将值从post.js传递给index.js的Limit变量任何解决方案该怎么做？

Answer 1

您听说过sessionStorage吗？

您可以将数据保存在键/值对中，并在任何需要的位置读取。

Answer 2

将查询定义为附加到全局window对象的对象，如下所示：

window['query'] = graphql`
  query IndexPageQuery($Limit: Int) {
  allMarkdownRemark(sort: {fields: [frontmatter___date], order: DESC}, limit: $Limit) {
  totalCount`}};

然后，确保在依赖于查询变量的所有文件之前加载此变量初始化的文件。您将可以这样访问它：window.query。

例如，如果您在index.js中定义查询，请确保在加载index.js或任何其他依赖于此查询的js文件之前先加载post.js。（除非您拥有IIFE，但并非总是必须的，但是避免了任何意外的未定义问题）

注意：之所以这样定义窗口对象，是因为window['query'] = query而非window.query = query是因为webpack不会更改对象键名。如果您像window.query = query这样定义，则webpack会更改名称。

如何将变量从JS的一个文件传递给另一个文件中的查询？

2 个答案: