我想用反應在 fullpage.js 中添加 class 'active'，但我不知道如何

Question

我正在使用 fullpage.js，我希望這取決於我所在的部分。 添加 class = 'active' 或刪除相同的 class。 例如：如果我在 #section1 添加 'active' 如果我離開它和 go 到 #section2 添加 'active' 在 #section2 並刪除 'active' 在 #section1

export default class SearchNav extends React.Component {

render(){
    return (
        <div id='fp-nav' class='left'>
            <ul>
                <li>
                    <a href="#section1"></a>
                </li>
                <li>
                    <a href="#section2"></a>
                </li>
                <li>
                    <a href='#section3'></a>
                </li>
                <li>
                    <a href='#section4'></a>
                </li>
            </ul>
        </div>
    )
}

}

Answer 1

您可以使用包含 boolean 道具的 object 創建 state。 如果鏈接到它們的 object 獲得“真”值，則在每個部分上設置一個“活動” class。

當你點擊一個部分時，設置一個 function 會觸發好道具的 object 的false / true嗎？

Answer 2

你實際上不需要。

fullPage.js 除了在body元素上添加另一個“狀態” class 之外，還會在活動部分/幻燈片中自動為您添加active class （例如fp-viewing-page2-1 ）

您可以在文檔中閱讀有關這些 state 類的更多信息。 https://github.com/alvarotrigo/fullPage.js#state-classes-added-by-fullpagejs