<\/span><\/h2>\n\n\n\nYou have a component:<\/p>\n\n\n\n
const Button = ({children, icon, isLoading, ...rest}) => (\n <button {...rest}>\n {icon}\n {children}\n {isLoading && <Loader\/>}\n <\/button>\n)\n\nconst Test = () => <Button icon=\"+\">Hello World<\/Button><\/code><\/pre>\n\n\n\nWhich is rendered to:<\/p>\n\n\n\n
<button>+Hello World<\/button><\/code><\/pre>\n\n\n\nIf an element (<button><\/code> in this case) contains multiple rendered string variables, they become text nodes in React's VDOM and HTML DOM. However, Google Translate doesn't care about text nodes and wrap them inside a <font><\/code> element:<\/p>\n\n\n\n<button><font>+\u4f60\u597d\u4e16\u754c<\/font><button><\/code><\/pre>\n\n\n\nSince they are not text nodes anymore, synchronization between React and DOM was broken. The button content will not be updated anymore.<\/p>\n\n\n\n
<\/span>How to fix it<\/span><\/h2>\n\n\n\nSimply avoid this situation. Write every {variable}<\/code> inside an element, as the only child.<\/p>\n\n\n\nconst Button = ({children, icon, isLoading, ...rest}) => (\n <button {...rest}>\n <span className=\"button__icon\">{icon}<\/span>\n <span className=\"button__text\">{children}<\/span>\n {isLoading && <Loader\/>}\n <\/button>\n)\n\nconst Test = () => <Button icon=\"+\">Hello World<\/Button><\/code><\/pre>\n\n\n\nNow every variable is synchronized with the <span><\/code> element, not text nodes. Inserting <font><\/code> elements doesn't break the connection. <\/p>\n\n\n\nAnother situation is that when you mix text nodes with elements.<\/p>\n\n\n\n
<p>\n Copyright 2016-{new Date().getFullYear()}\n<\/p><\/code><\/pre>\n\n\n\nShould be converted to:<\/p>\n\n\n\n
<p>\n <span>Copyright 2016-<\/span>\n <span>{new Date().getFullYear()}<\/span>\n<\/p><\/code><\/pre>\n\n\n\nJust make sure: a text node or string variable must be the only child<\/strong> of an element.<\/p>\n\n\n\n<\/span>Event target<\/span><\/h2>\n\n\n\nAnother issue is that the click event target will change. It might be <font><\/code> elements instead of <button><\/code>. Carefully check everywhere you use e.target<\/code>, considering they might not be the button, input or other elements you expected.<\/p>\n\n\n\nA further suggestion is to avoid using any e.target<\/code> reference. Here is a piece of legacy code:<\/p>\n\n\n\nconst {sizes, onChange} = this.props\nreturn (\n <div>\n {sizes.map(size => (\n <button\n key={size}\n name=\"size\"\n value={size}\n onClick={e => this.props.onChange(e.target.value)}>\n {size.toUpperCase()}\n <\/button>\n ))}\n <\/div>\n)<\/code><\/pre>\n\n\n\nCan be changed to:<\/p>\n\n\n\n
const {sizes, onChange} = this.props\nreturn (\n <div>\n {sizes.map(size => (\n <button\n key={size}\n name=\"size\"\n value={size}\n onClick={e => this.props.onChange(size)}>\n {size.toUpperCase()}\n <\/button>\n ))}\n <\/div>\n)<\/code><\/pre>\n\n\n\n<\/span>If you use third-party components from a library<\/span><\/h2>\n\n\n\nIn this case, you usually cannot modify the component as you want.<\/p>\n\n\n\n
You can try to use <span>your string<\/span><\/code> instead of \"your string\"<\/code> as component properties.<\/p>\n\n\n\nReport to the library maintainers and make a PR with above methods.<\/p>\n\n\n\n
<\/span>If the element doesn’t support child elements<\/span><\/h2>\n\n\n\nSome components doesn't support inner wrappers, like <option><\/code>. If you put <span><\/code> inside <option><\/code>, React will give you warnings in console, even though the rendering works. So you probably don't want to do it.<\/p>\n\n\n\nFor example you have:<\/p>\n\n\n\n
<select>\n {fruites.map(f => <option value={f.name}>{f.name} - {f.price}<\/option>)}\n<\/select><\/code><\/pre>\n\n\n\nChange it to:<\/p>\n\n\n\n
<select>\n {fruites.map(f => {\n const label = f.name + ' - ' + f.price;\n \treturn <option value={f.name}>{label}<\/option>\n })}\n<\/select><\/code><\/pre>\n\n\n\n<\/span>If you want to disable Google Translate<\/span><\/h2>\n\n\n\nEven if you do all above, something can still go wrong. If you don't have time to waste and just want to disable Google Translate, it is simple:<\/p>\n\n\n\n
<body class=\"notranslate\">\n ...\n<\/body><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Note: we are only talking about Google Translate function in Chrome or Chromium based browsers. Other translate plugins or software don't necessarily work with this solution. And this solution doesn't solve all issues, just a part of them. When does it happen You have a component: Which is rendered to: If an element (<button> in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[8,6,5,7],"class_list":["post-44","post","type-post","status-publish","format-standard","hentry","category-code","tag-front-end","tag-javascript","tag-react","tag-web"],"_links":{"self":[{"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/posts\/44","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/comments?post=44"}],"version-history":[{"count":14,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/posts\/44\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/posts\/44\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/media?parent=44"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/categories?post=44"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/guoyunhe.me\/en\/wp-json\/wp\/v2\/tags?post=44"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}