Question

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

    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不是我应该采用的方法。

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

有什么建议吗？

Answer 1

根据文档react-visibility-sensor：

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

所以也许不用传递onchange函数，而只需传递 isVisible 参数，就像这样：

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

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

从函数访问Gatsby组件

1 个答案: