javascript - 有没有更简洁的方法来编写此 React 代码？

Question

第一次使用react。编写一段代码，我希望我单击的元素突出显示，而未选中的元素不突出显示。基本上，我希望根据我单击的元素将状态更改为 true，并将其他状态切换为 false。

我的问题是，有没有更优雅的方式来编写这段代码？我最初尝试将其基于 event.target 但我不知道如何将状态绑定(bind)到特定元素。虽然下面的方法确实适合我的目的，但我确实想知道是否有一种方法可以更动态地使用 setState，而不必为每种情况编写单独的方法......

export default class CharacterNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            profileHighlighted: true,
            recruitHighlighted: false,
            artsHighlighted: false,
            talentsHighlighted: false,
            affectionHighlighted: false,
        }

        this.changeProfileHighlight = this.changeProfileHighlight.bind(this);
        this.changeRecruitHighlight = this.changeRecruitHighlight.bind(this);
        this.changeArtsHighlight = this.changeArtsHighlight.bind(this);
        this.changeTalentsHighlight = this.changeTalentsHighlight.bind(this);
        this.changeAffectionHighlight = this.changeAffectionHighlight.bind(this);
        this.resetNavState = this.resetNavState.bind(this);
    }

    changeProfileHighlight () {
        this.setState({
            profileHighlighted: true,
            recruitHighlighted: false,
            artsHighlighted: false,
            talentsHighlighted: false,
            affectionHighlighted: false
        });
    }
    changeRecruitHighlight () {
        this.setState({
            profileHighlighted: false,
            recruitHighlighted: true,
            artsHighlighted: false,
            talentsHighlighted: false,
            affectionHighlighted: false
        });
    }
    changeArtsHighlight () {
        this.setState({
            profileHighlighted: false,
            recruitHighlighted: false,
            artsHighlighted: true,
            talentsHighlighted: false,
            affectionHighlighted: false
        });
    }
    changeTalentsHighlight () {
        this.setState({
            profileHighlighted: false,
            recruitHighlighted: false,
            artsHighlighted: false,
            talentsHighlighted: true,
            affectionHighlighted: false
        });
    }
    changeAffectionHighlight () {
        this.setState({
            profileHighlighted: false,
            recruitHighlighted: false,
            artsHighlighted: false,
            talentsHighlighted: false,
            affectionHighlighted: true
        });
    }


    render () {
        let divClass = this.props.characterSelected ?
                "blueBackground" :"hideElement"; 
        let profilehighlightclass = this.state.profileHighlighted ? 'highlighted' : 'unhighlighted';
        let recruithighlightclass = this.state.recruitHighlighted ? 'highlighted' : 'unhighlighted';
        let artshighlightclass = this.state.artsHighlighted ? 'highlighted' : 'unhighlighted';
        let talentshighlightclass = this.state.talentsHighlighted ? 'highlighted' : 'unhighlighted';
        let affectionhighlightclass = this.state.affectionHighlighted ? 'highlighted' : 'unhighlighted';

        return(
            <div>
                <ul className={divClass}>
                    <li><h3 onClick={this.changeProfileHighlight} name='profileHighlighted' className={profilehighlightclass}>Profile</h3></li>
                    <li><h3 onClick={this.changeRecruitHighlight} name='recruitHighlighted' className={recruithighlightclass}>Recruitment</h3></li>
                    <li><h3 onClick={this.changeArtsHighlight} name='artsHighlighted' className={artshighlightclass}>Arts</h3></li>
                    <li><h3 onClick={this.changeTalentsHighlight} name='talentsHighlighted' className={talentshighlightclass}>Talents</h3></li>
                    <li><h3 onClick={this.changeAffectionHighlight} name='affectionHighlighted' className={affectionhighlightclass}>Affection</h3></li>
                </ul>
            </div>
        )
    }
}

Answer 1

是的，您可以在状态中保留突出显示元素的名称。

类似于:

export default class CharacterNav extends Component {
	constructor(props) {
		super(props);
		this.state = {
			highlighted: "profile",
		};
	}

	setHighlighted = e => {
		this.setState({
			highlighted: e.target.name,
		});
	};

	toggleHighlight = selectedTab => {
		return this.state.highlighted === selectedTab
			? "highlighted"
			: "unhighlighted";
	};

	render() {
		let divClass = this.props.characterSelected
			? "blueBackground"
			: "hideElement";

		return (
			<ul className={divClass}>
				<li>
					<h3
						onClick={this.setHighlighted}
						name="profile"
						className={this.toggleHighlight("profile")}
					>
						Profile
					</h3>
				</li>
				<li>
					<h3
						onClick={this.setHighlighted}
						name="recruit"
						className={this.toggleHighlight("recruit")}
					>
						Recruitment
					</h3>
				</li>
				<li>
					<h3
						onClick={this.setHighlighted}
						name="arts"
						className={this.toggleHighlight("arts")}
					>
						Arts
					</h3>
				</li>
				<li>
					<h3
						onClick={this.setHighlighted}
						name="talents"
						className={this.toggleHighlight("talents")}
					>
						Talents
					</h3>
				</li>
				<li>
					<h3
						onClick={this.setHighlighted}
						name="affection"
						className={this.toggleHighlight("affection")}
					>
						Affection
					</h3>
				</li>
			</ul>
		);
	}
}

您还可以通过迭代数组来改进 li 渲染

export default class CharacterNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
          highlighted: 'profile'
        }

        this.setHighlighted = this.setHighlighted.bind(this);
    }
    
    setHighlighted(e) {
      this.setState({
        highlighted: e.target.name
      });
    }

    render () {
        let divClass = this.props.characterSelected ?
                "blueBackground" :"hideElement"; 
        return(
            <div>
                <ul className={divClass}>
                    ['Profile', 'Recruitment', 'Talents', 'Affection'].map(item => {
                      const name = item.toLowerCase();
                      return (
                          <li>
                              <h3 
                                  onClick={this.setHighlighted} 
                                  name={name} 
                                  className={name === this.state.highlighted ? 'highlighted' : 'unhighlighted'}>
                                  {item}
                              </h3>
                          </li>
                      )
                    })
                </ul>
            </div>
        )
    }
}