相关疑难解决方法(0)

以下React.js代码使用两个名为“ about”和“ project”的链接来渲染导航栏。在页面加载时，“关于”链接处于活动状态，并显示为红色。单击另一个链接后，导航栏的状态将设置为“项目”，“链接”样式将重新设置，并且“项目”将显示为红色。

我通过在两个链接标记上附加一个单击处理程序，并将active状态设置为event.target.innerHTML的名称来实现。

我是新来的反应者，我认为这是解决该问题的非常冗长的方法。我知道有一个activeClassName属性可以传递给react-router链接，但是我想要一种不使用它的方法。

import React, { Component } from 'react'
import { Link, Route } from 'react-router'

export default class Navbar extends Component {
    constructor() {
        super();
        this.state = {
            active: 'about'
        }
        this._handleClick = this._handleClick.bind(this);
    }

    _handleClick(e) {
         this.setState({
            active: e.target.innerHTML
         });
    }

    render() {
        let aboutStyle;
        let projectStyle;

        if (this.state.active === 'about') {
            aboutStyle = { color: '#ff3333' };
            projectStyle = {};
        } else {
            aboutStyle = {};
            projectStyle = { color: '#ff3333' };
        }

        return …