从函数访问 Gatsby 组件答案

【问题标题】：Access Gatsby Component from a function从函数访问 Gatsby 组件
【发布时间】：2019-08-19 02:17:57
【问题描述】：

我正在尝试从外部访问 Gatsby 组件（动漫）。无法弄清楚这将具有什么实例名称或如何命名它。这是我的代码：

    import React from 'react'
    import PropTypes from 'prop-types'
    import PreviewCompatibleImage from '../components/PreviewCompatibleImage'
    import Anime from 'react-anime';
    import VisibilitySensor from 'react-visibility-sensor';

    function onChange (isVisible) {
     console.log('Element is now %s', isVisible ? 'visible' : 'hidden')
     }  

    const FeatureGrid = ({ gridItems }) => (
      <div className="columns is-multiline">
      <VisibilitySensor onChange={onChange}>
      <Anime delay={(e, i) => i * 100}
             scale={[.1, .9]}
             autoplay={false}>
        {gridItems.map(item => (
          <div key={item.text} className="column is-3">
            <section className="section">
              <div className="has-text-centered">
                <div
                  style={{
                    width: '160px',
                    display: 'inline-block',
                  }}
                >
                  <PreviewCompatibleImage imageInfo={item} />
                </div>
              </div>
              <p>{item.text}</p>
            </section>
          </div>
        ))}
      </Anime>
      </VisibilitySensor>
      </div>
    )

    FeatureGrid.propTypes = {
      gridItems: PropTypes.arrayOf(
        PropTypes.shape({
          image: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
          text: PropTypes.string,
        })
      ),
    }

    export default FeatureGrid

我想让动画从 onChange 函数触发。如何获取名称或设置 Anime 组件的名称，以便我可以从函数中访问它？还是有其他方法可以解决这个问题？

使用 Gatsby 启动器 netlify CMS 作为基础，因此扩展了他们的代码，但似乎 const 不是我应该采取的路线。

我希望动画在可见时触发。

有什么建议吗？

【问题讨论】：

您在alain.xyz/libraries/react-anime 看到reactive animations 示例吗？
@ksav 我做了，但是示例是基于渲染的，而启动器在每个页面中都使用导出，不知道如何实现示例

标签： reactjs gatsby

【解决方案1】：

根据文档react-visibility-sensor：

您可以传递一个子函数，如果您不需要将可见性存储在任何地方，这会很方便

所以也许您可以传递 isVisible 参数而不是使用 onchange 函数，例如：

<VisibilitySensor>
  {({isVisible}) =>
     <Anime delay={(e, i) => i * 100}
         // the rest of your codes here ...
     </Anime>
  }
</VisibilitySensor>

否则您可以将此函数转换为反应组件并设置状态等。

【讨论】：