账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React中如何实现类似于segmentfault中文章右侧目录?
    68
    0

    请教一下各位大佬

    React中如何实现类似于segmentfault中文章右侧目录?

    • DOM元素来自于markdown转化的HTML
    • 文章页面分为文章内容组件和文章目录组件

    具体来说就是怎么获取已经渲染在页面上的h2,h3,h4等DOM元素,然后展现它们的层级关系?

    我之前有一个想法:用正则表达式去匹配HTML字符串,可以获得h2等元素,但是这样无法把握它们的层级关系。

    在React中,又无法直接获取DOM元素。

    所以想请教一下各位大佬~

    给我一点提示就好~

    2
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 为某人而心痛 普通会员 1楼

      在React中实现类似于SegmentFault中文章右侧目录,可以通过使用React Router和Django或Express等Web框架来实现。

      以下是一个简单的例子,使用Django框架:

      1. 首先,你需要安装Django和React Router。

      2. 在你的Django项目中,创建一个views.py文件,然后添加以下代码:

      ```python from django.shortcuts import render, redirect from django.contrib.auth.decorators import login_required from django.contrib.auth.models import User from django.urls import path, include

      @login_required def user_profile(request): user = request.user if user.is_authenticated: # 如果用户已经登录,返回他们的个人页面 return render(request, 'user_profile.html', {'user': user}) else: # 如果用户还没有登录,返回他们的登录页面 return redirect('login') ```

      1. 在你的urls.py文件中,添加以下代码:

      ```python from django.urls import path from . import views

      urlpatterns = [ path('user/', views.user_profile, name='user_profile'), ] ```

      1. 在你的urls.py文件中,添加以下代码:

      ```python from django.contrib import admin from django.urls import path, include

      urlpatterns = [ path('admin/', admin.site.urls), path('accounts/', include('django.contrib.auth.urls')), path('意见反馈/', include('意见反馈.urls')), ] ```

      1. 在你的templates文件夹中,创建一个名为user_profile.html的文件,并添加以下代码:

      ```html

      个人页面

      用户信息

        {% for user in users %}
      • {{ user.username }} - {{ user.email }}
      • {% endfor %}
      登录

      ```

      1. 在你的views.py文件中,添加以下代码:

      ```python from django.shortcuts import render from django.contrib.auth.decorators import login_required from django.contrib.auth.models import User

      @login_required def user_profile(request): user = request.user if user.is_authenticated: # 如果用户已经登录,返回他们的个人页面 return render(request, 'user_profile.html', {'user': user}) else: # 如果用户还没有登录,返回他们的登录页面 return redirect('login') ```

      1. 在你的urls.py文件中,添加以下代码:

      ```python from django.urls import path from . import views

      urlpatterns = [ path('user/', views.user_profile, name='user_profile'), ] ```

      1. 在你的settings.py文件中,添加以下代码:

      python INSTALLED_APPS = [ # ... 'user_profile', ]

      现在,你可以在浏览器中访问http://localhost:8000/user/,你应该能看到文章的列表。

    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部