Entities in computed attribute values? Suggested approach? about react-head HOT 5 CLOSED

Hey thanks for the nice note :)

I think what you're running into is React's auto-escaping by default? There's some ways around that documented here: https://shripadk.github.io/react/docs/jsx-gotchas.html -- does that help?

from react-head.

Hi, @tizmagik – Sorry for the delayed response. Yes, I read through that. Unfortunately, I don't see a workaround for attributes. dangerouslySetInnerHTML is the closest... but isn't for attributes.

Unless I missing something obvious... Work correctly in the browser, just not with renderToStaticMarkup.

from react-head.

Oh interesting, hmm... do you know if the problem is specific to react-head or to renderToStaticMarkup?

from react-head.

I've got something going on with my GitHub notifications because I never get a notice when you respond...

Looks like it's an issue with ReactDOM's renderToStaticMarkup. Here's a runkit:
http://runkit.com/joshuatoenyes/reactdom-ampersand-test

Which leads me back to the workaround... Seem's like this is definitely a JSX "gotcha."

So unless there's some known workaround that I'm not aware of (which seems like the case), I think the only solutions are:

a) not include ampersands in URL's (what I'm doing now)
b) build a custom React renderer for React Head that doesn't escape in SSR

I'll fix my notifications :) cheers.

from react-head.

It looks like React Helmet can allow special characters in generated SSR output by flipping the encodeSpecialCharacters property to false.

They're manually building the tag strings:
https://github.com/nfl/react-helmet/blob/420810c644f94c3743f7b088321dbd62a8037b7b/src/HelmetUtils.js#L514

Obviously a more complex approach than React Head takes.

I'm going to close this issue by noting for posterity that React Head doesn't support this particular corner case since all rendered components for SSR are piped through React and therefore subject to React's JSX escaping rules.

Thanks!

from react-head.