Question

我有一个带有语言切换功能。现在，我想对带有功能值的按钮进行条件渲染，例如单击语言时显示“ nl”，nl按钮消失。我已经开始使用const languageIsEnglish

export default function App({ path }) {
  const Page = pageRenderers[path]
  const [language, setLanguage] = React.useState('nl')
  return (
    <I18nProvider value={i18n} {...{ language }}>
      <Page onLanguageChange={setLanguage} />
    </I18nProvider>
  )
}
export function NavigationDesktop({ links, onLanguageChange }) {
  const languageIsEnglish = onLanguageChange
return (
    <button onClick={() => onLanguageChange('en')} className={styles.languageToggle}>En</button>
     <button onClick={() => onLanguageChange('nl')} className={styles.languageToggle}>Nl</button>
  )
}

Answer 1

您可以使用三元运算符执行以下操作：

return (language === 'nl' ? 
    <button onClick={() => onLanguageChange('en')} className={styles.languageToggle}>En</button> :
     <button onClick={() => onLanguageChange('nl')} className={styles.languageToggle}>Nl</button>)

工作代码段：

const { useState , useEffect } = React;

const App = () => {

  const [language,setLanguage] = useState('nl');

  function changeLanguage(lang) {
    setLanguage(lang);
  }

  return (
      language === 'nl' ? 
      <button onClick={() => changeLanguage('en')}>En</button> :
      <button onClick={() => changeLanguage('nl')}>Nl</button>
    );
}

ReactDOM.render(<App />, document.getElementById('react-root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

Answer 2

您只需要渲染一个按钮，即可根据当前使用的语言更改传递给回调和标签的内容：

if $TERM ==# 'screen256-color'

Answer 3

对于两种以上的语言，三元运算符将不起作用。我们可以使用像这样的开关盒

在渲染功能中

export default function App() {

  return (
    <div className="App">
      {getButton('nl')}
    </div>
  );
}

在getButton函数中，我们可以使用像这样的开关

const getButton = (language) => {
  switch(language) {
    case 'en':
      return <button onClick={() => onLanguageChange(language)}>{language.toUpperCase()}</button>
    case 'nl':
      return <button onClick={() => onLanguageChange(language)}>{language.toUpperCase()}</button>
    default:
      // default language
      break;
  }
}

这样，我们可以有条件地提供按钮。

如何设置函数的条件渲染？

3 个答案: