Enable the t() function to accept callbacks.

[patrickluoyu]

trafficstars

What would you like to be added:

Enable the t() function used for localization to accept callbacks as its arguments.

Why is this needed:

The current t() function used for localization cannot accept callbacks as its arguments, which makes it impossible to avoid concatenation of certain UI strings. Such concatenated strings cannot be translated into languages that follow different word orders from English.

For example, the following sentence is split into four elements and cannot be translated into Japanese which puts objects before verbs and Arabic which is read from right to left.

We need to enable the t() function to accept callbacks so that we can transform the concatenated strings into one string and have something like this:

t('SOME_STRING', {callback1: this.callback1, callback2: this.callback2})

---

SOME_STRING: 'Click <a onClick={callback1}>link 1</a> and <a onClick={callback2}>link 2</a> for different purposes.'

[patrickluoyu]

/assign @zryfish @chenz24 @harrisonliu5 @xuliwenwenwen

[zheng1]

How about integrating react-i18next in kube-design? You can see the following example

Although the difficulty of code will be a little higher, but the benefits are greater

ref: https://codesandbox.io/s/1zxox032q?file=/src/i18n.js:127-140

[chenz24]

The t function has a method html(). Maybe you can try this:

t.html('SOME_STRING', {callback1: this.callback1, callback2: this.callback2})

---

SOME_STRING: 'Click <a onClick={callback1}>link 1</a> and <a onClick={callback2}>link 2</a> for different purposes.'

i18next has powerful features and is more widely used, and we will be using it in version 4.