Bir JSX bağımsız değişkeni içinde birleştirme işlemi gerçekleştirme

Question

Bir anahtar temel alarak doğru bir çeviri döndüren çeviriler için bir sistemim var. - çalıştırılacak

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

sorun bu bileşen dönmedi geçerli:

import React from 'react'; 

const Translate = ({ ln }) => { 

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

export default Translate; 

Sorun örneğin bir iç kullanmaya çalıştığınızda şudur: Ve bu her Çevir bir bileşen tarafından işlenir Onu <input />'a ekliyorum, yani yer tutucum her zaman [nesne Nesnesi] olacak, bunu çözmek için herhangi bir yol var mı? Sen placeholder geçememektedirler

Answer 1

placeholder Sizin String değil Object veya Stringcontains tags o geçmelidir çünkü Translate çift işlevlerine daha bölünmüş bu durumda düşünüyorum., Bileşen tepki ve Translate bileşeninde ve tıpkı kullanmak anahtarıyla sağa dönüş yapan bir işlev, gibi

Answer 2

Neden bir dizeyi çeviri için bir bileşen kullanıyorsunuz? Bu, endişelerin iyi bir şekilde ayrıldığını ve çevirmeninizin yeniden kullanılabilirliğini azalttığını düşünüyorum.

Hemen Örneğin

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

gibi çeviri için i18next gibi bir şey kullanabilirsiniz

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

gibi bunun için bir fonksiyonu kullanmak