在 JSX 參數中反應渲染組件

Question

我有一個翻譯系統，可以根據密鑰返回正確的翻譯。 而這一切都由組件 Translate 處理：

import React from 'react';

const Translate = ({ ln }) => {

    return <span>{language[ln]}</span>
};

export default Translate;

問題是，當我嘗試在 a 中使用它時，例如：

<input type="text" placeholder=<Translate ln="text_input" /> />

問題是組件沒有返回 - 當我將它插入<input /> ，這意味着我的占位符將始終是 [object Object]，有什么辦法可以解決這個問題？

Answer 1

您不能傳遞給placeholder React 組件，因為要傳遞給placeholder您應該傳遞String而不是Object或contains tags String 。，我認為在這種情況下，最好將Translate拆分為耦合函數，並在Translate組件中使用它，並將其用作一個函數按鍵返回正確的翻譯，就像這樣

const translate = (key) => {
  // Some code ... 
  return language[ln];
}; // returns string

const Translate = ({ ln }) => {
  return <span>{ translate(ln) }</span>
}; // return React component

<input 
  type="text" 
  placeholder={ translate('some key') } /> // pass string to placeholder

Answer 2

為什么首先要使用組件來翻譯字符串？ 我認為這不是很好的關注點分離，並且會使您的翻譯器的可重用性降低。

只需使用一個函數

<input type="text" placeholder={t('text')} />

例如，您可以使用i18next 之類的內容進行翻譯，例如

<input type="text" placeholder={i18next.t('text')} />