小编Bro*_*nBe的帖子

I looking for a solution about get an array of DOM elements with react useRef() hook.

example:

const Component = () => 
{

  // In `items`, I would like to get an array of DOM element
  let items = useRef(null);

  return <ul>
    {['left', 'right'].map((el, i) =>
      <li key={i} ref={items} children={el} />
    )}
  </ul>
}

How can I achieve this?

我正在使用Vue Resource从REST API检索图像集合.请求在created我的Vue组件的钩子中发送.

问题是,我正在尝试访问mounted钩子中检索到的数据,但是没有加载数据.

我在控制台中收到此错误:

[Vue警告]:挂钩时出错:"TypeError:无法读取属性'forEach'未定义"

这是我的组件:

<script>
export default {
  data() {
    return { imgs : '' };
  },
  created() {
    // the full url is declare in my main.js
    this.imgs = this.$resource('acf/v3/pages/4');

    this.imgs.query().then((response) => {
      console.log('success', response);
      this.imgs = response.data.acf.gallery;
    }, (response) => {
      console.log('erreur', response);
    });
  },
  mounted() {
    // get the ref="image" in my dom template
    let imgs = this.$refs.image;

    imgs.forEach((img) => {
      // I do some stuff with imgs …

我正在尝试使用photoswipe插件单击图像时定义占位符.我想定义与我的屏幕上显示的图像完全相同的响应式图像版本.

data-srcset="
http://url.com/img-240.jpg 240w, 
http://url.com/img-360.jpg 360w, 
http://url.com/img-480.jpg 480w, 
http://url.com/img-720.jpg 720w "

以上是我的图像的不同版本.

我的挑战是显示当前图像.为此,我使用了该currentSrc属性,该功能在Firefox和Chrome上运行良好,但在Safari上无效.

var currentSrc = imgEl.currentSrc || imgEl.src;

我没有找到任何有关Safari&的可能解决方案的信息currentSrc.

我正在寻找在Vuejs类Component中声明一个Typescript接口Props的方法，就像我们可以对React Component一样。

看起来像这样：

import {Component, Prop, Vue} from 'vue-property-decorator'

export class Props extends Vue
{
  classElement :string
}

@Component
export default class Menu extends Vue<Props>
{
    public props :Props;

    constructor(props)
    {
        super(props);
        console.log(props); // return undefined 
    }

    mounted()
    {
      console.log(this.props.classElement); // return undefined
    }
}

有没有办法做到这一点？

子组件有一个依赖于父 props 的 ref 数组。如果道具发生变化而不重新渲染我的子组件，我想更新引用列表。

const childComponent = (props) =>
{
  // the array of ref item list
  const itemsRef = Array.from({ length: props.menuItems.length }, a => 
  useRef(null));

  useLayoutEffect(()=>
  {
   // enter anim new item ref...

  },[props.menuItem])


  return <ul>
    {props.menuItems.map((el,i) => 
      <li 
        key{i} 
        ref={itemsRef[i]}
        children={el.name}
     >}
  </ul>

}

itemsRef如果父更新通过 props 传递新的 menuItem 列表，则不会重新计算。

如何用钩子实现这一点？

我想用jQuery一个接一个地淡出一个项目列表.

我的HTML:

<div>
 <span>h</span>
 <span>e</span>
 <span>l</span>
 <span>l</span>
 <span>o</span>
 <span></span>
 <span>w</span>
 <span>o</span>
 <span>r</span>
 <span>l</span>
 <span>d</span>
 <span></span>
 <span>m</span>
 <span>y</span>
 <span></span>
 <span>n</span>
 <span>a</span>
 <span>m</span>
 <span>e</span>
 <span></span>
 <span>i</span>
 <span>s</span> 
</div>

我可以像这样写我的JS,但它不会真正优化:

$(document).ready(function() {

    $('span').hide();

    $(window).load(function() {
        ('div span:nth-child(1)').fadeIn( function() {
             ('div span:nth-child(2)').fadeIn( function() {
                 ('div span:nth-child(3)').fadeIn( function() {
                    // etc... 
                });
            });
        });

    });

});

如何写出"当一个跨度消失,淡入下一个"时？