alibaba / react-intl-universal

Internationalize React apps. Not only for Component but also for Vanilla JS.
1.33k stars 153 forks source link

Option to getHTML() without creating outer <span> #207

Closed menushka closed 2 months ago

menushka commented 1 year ago

Ideally I'd like to reduce the amount of DOM I have in React by not having the outer span appended.

const value = 'VALUE'
return (
  <div>
    {intl.getHTML('key', { value }).d(<span><span>{value}</span> Look at that cool value!</span>)}
  </div>
)

Currently results in:

<div>
  <span><span><span>VALUE</span> Look at that cool value!</span></span>
</div>

What I would prefer:

<div>
  <span><span>VALUE</span> Look at that cool value!</span>
</div>

Also using an empty outer tag breaks it entirely:

const value = 'VALUE'
return (
  <div>
    {intl.getHTML('key', { value }).d(<><span>{value}</span> Empty tag for smaller DOM but it breaks</>)}
  </div>
)
<div>
  <span><><span>VALUE</span> Empty tag for smaller DOM but it breaks</span>
</div>

I would want it to result in this:

<div>
  <span>VALUE</span> Empty tag for smaller DOM but it breaks
</div>
cwtuan commented 1 year ago

Yes, currently an outer <span> will be added to the message. It will be a break change if <span> was removed. So I prefer to remain current behavior.