时间戳

首页 > 解决方案 > 如何避免 React 中 3 个类似按钮的代码重复？

javascript - 如何避免 React 中 3 个类似按钮的代码重复？

问题描述

我有 3 个用于 3 种不同语言的按钮，

用户可以选择显示哪种语言文本：

  1. “德国德语”

  2. “法国法语”

  3. “英语”

// This is state of component:
 state = {
    translationOptions: {
      german: false,
      french: false,
      english: true
    }
  };

// This is function which change the language

  <button
    className={`doc-translation-btn ${german ? 'active-background-color' : ''}`}
    onClick={() => this.changeDocumentLanguage('german')}
  >
     DE
  </button>

  <button
    className={`doc-translation-btn ${french ? 'active-background-color' : ''}`}
    onClick={() => this.changeDocumentLanguage('french')}
    >
      FR
   </button>

  <button
     className={`doc-translation-btn ${english ? 'active-background-color' : '' }`}
     onClick={() => this.changeDocumentLanguage('english')}>
       EN
   </button>

如何优化这段代码？

标签： javascriptreactjs

解决方案

const langs = [{name: 'German', abbr: 'GE'}, {name: 'French', abbr: 'FR'}, 
{name: 'English', abbr: 'EN'}]


//// Assuming React Stateful Component

state = {
   translationOption: ''  //Will be of of German, French, or English on state change
}

////

render() {
    return (
      <div>
        {langs.map(({ name, abbr }) => (
          <button
            className={`doc-translation-btn ${name === 
            this.state.translationOption ? 'active-background-color' : '' }`}
            onClick={() => this.setState({ translationOption: name })>
           {abbr}
         </button>
        )}
    </div>
  )
}

注意：如果您想用单独的布尔属性处理适用的翻译语言——无论是嵌套的还是其他的——你需要考虑在你的状态处理程序方法中将另一个属性设置为 true 时将其他属性切换为 false （假设一次只能应用一种翻译）。像这样的方法可以工作：

  handleLangChange = selectedLang => {
    const { translationOptions: oldOpts } = this.state;
    const translationOptions = Object.keys(oldOpts).reduce((acc, cur) => {
       return { ...acc, [cur]: cur === selectedLang };
     }, {})

     this.setState({ ...this.state, translationOptions });
   }

推荐阅读