[object Object] react value

[xuoutput]

xx.json

{
  "welcome.message": "hello, {name}"
}

在 react 组件中如果直接使用 会渲染为 hello, [object Object]

export default function Hello() {

const name = <span style={{ color: 'blue' }}>world</span>;
return <>
{intl.getHTML('welcome.message', { name })}
</>
}

当然可以直接把 json 文件改为

{
  "welcome.message": "hello, <span style="color:blue">{name}</span>"
}

然后

export default function Hello() {

const name = 'world';
return <>
{intl.get('welcome.message', { name })}
</>
}

但有些情况是一句话内要对存在不同样式, 还有事件的

import {Button} from 'antd';
export default function Hello() {

const name = <Button onClick={() => console.log('111')}>world</Button>;
return <>
{intl.getHTML('welcome.message', { name })}
</>
}

有没有简便的方式来实现这个功能

[cwtuan]

1. Use react-intl-universal-extract to extract default message to your locale files.

   intl.get('welcome.message', { name }).d(<span>hello, <span style="color:blue">{name}</span></span>)

2. Binding event: https://github.com/alibaba/react-intl-universal#2-how-to-bind-event-handlers-to-an-internationalized-message

[xuoutput]

我试一下, 遇到问题,

• 229

另外绑定 事件 https://github.com/alibaba/react-intl-universal#2-how-to-bind-event-handlers-to-an-internationalized-message

import {Button} from 'antd';
export default function Hello() {

const name = <Button onClick={() => console.log('111')}>world</Button>;
return <div>
{intl.getHTML('welcome.message', { name })}
</div>
}

看着依旧不能在 name 中设置, (对 Button 设置事件), 而是整个div 监听事件了.

补充下之前的 demo

比如有这么一句话和翻译 不能作为一个个 单词拆开翻译, 而是作为一整句话翻译

• 名字这里是一个自定义 React 组件, 而不是简单的 HTML 标签
• 名字这里有监听事件

hello, Tom
Tom 你好

代码

import {Button} from 'antd';
export default function Hello() {

const name = <Button onClick={() => console.log('111')}>Tom</Button>;
return <div>
{intl.getHTML('welcome.message', { name })}
</div>
}

json

// 英文
{
  "welcome.message": "hello, {name}",
}

//中文
{
  "welcome.message": "{name} 你好"
}