React.js:从列表组Bootstrap 4将A标签更改为<Link>标签

时间:2019-10-22 13:16:12

标签: reactjs bootstrap-4

我正在使用Reactjs,并且尝试使用Bootstrap 4中的此列表组。但是,当我将A标签更改为for ... of时,该代码将不再起作用,并且将不会显示任何内容。使用<Link>在React中呈现它的最佳方法是什么?

<Link>

例如 <div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div> <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div> </div> </div> </div> <a class="list-group-item list-group-item-action active"...

1 个答案:

答案 0 :(得分:0)

我已经试过使用此代码,并且在删除data-toggle="list"后,该代码可以与<Link>标签一起使用!