杂谈

最新推荐文章于 2024-06-04 20:44:33 发布

天行健，自强不息；地势坤，厚德载物

最新推荐文章于 2024-06-04 20:44:33 发布

阅读量135

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/weixin_40979567/article/details/80859489

react 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用React为特定位置的文字添加样式，并展示了jQuery实现的楼梯导航效果，包括滑动监听与动画切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 在给某一段文字的某些固定位置变换样式的时候采用数组的形式为切割开的每一段文字添加样式案例如下：

list[i].index 代表从哪里开始要变样式 list[i].value 表示变化的内容

for(var i = 0; i < list.length; i++){
      const span1 = val.slice(lastIndex, Number(list[i].index));
      content1.push(
          <span>{span1}</span>
      );
      const span2 = "("+list[i].key+"=>"+list[i].value+")";
      content1.push(
          <span className="t">{span2}</span>
      );
      lastIndex = list[i].index+1;
    }

将content返回在return当中就成功了

2 在react当中绑定ref的时候

ref = { (node) => { this.name = node ; } }

3 react 父组件在传递给自组建props的时候，子组件用componentWillReceiveProps 接收，有时候也会出现直接使用 this.props.bala的情况

4 在jquery写楼梯的时候，需要使用boolean值来判断当前是否在滑动状态再执行动作

$(function() {
      $(window).scroll(function() {
        const m = $(document).scrollTop();
        if (m > 550) {
          $('#tips').addClass('top');
        } else {
          $('#tips').removeClass('top');
        }

        if (flag) {
          $('#part li').each(function() {
            const index = $(this).index();
            const height = $(this).offset().top + 50;
            if (height > m) {
              $('#tips li').eq(index).addClass('change')
                .siblings()
                .removeClass('change');
              return false;
            }
          });
        }
      });

      $('#tips li').click(function() {
        if (flag) {
          flag = false;
          const l = $('#part').children().eq($(this).index())
            .offset().top - 100;
          // console.log('start animate');
          $('body,html').animate({ scrollTop: l }, 500, function() {
            flag = true;
            // console.log('end animate');
          });
        }
      });
    });