React and dynamic content

help
1

Okay, I thought I’d ask here before SO.

Basically, I’m thinking of creating a small dictionary for my pupils, Wiki-like but less complicated (Wikipedia tends to throw in everything and the kitchen sink). The content will be strictly limited to stuff we covered in our lessons.

As a result, I’d like to use some kind of Markdown - I don’t need the full monty and can cover that part with Regular Expressions. Since I’ll be the only one to use that, I can live with inadequacies. That’s not the problem, either.

My problem comes from the fact that I want to use cross-references. Say, it’s an explanation of “voltage” and the text mentions “current”. Thus I’d like to link to the explanation of “current”.

With a bog-standard page, no problem, the result would look like:

<a href="/dictionary/current">Current</a>

However, I’m using React-Router and a normal hyperlink leads to a complete page-refresh.

A normal link with React-Router looks like this:

<Link to="/dictionary/current">Current</Link>

Is there some way I can easily incorporate this into dynamic content, i.e. content which I’m pulling from the database.

Someone do this before?

2

you can create a HOC that enhances its wrapped component with a functionality that parses the enclosed html (standard js dom parsing, not through refs), attaches click handlers to anchor tags which prevents default and browserHistory.push’es to their href’s, and of course you need to clean up the handlers before unmounting.

3

That’s kind of the opposite of “easy” :slight_smile:

4

Well, that’s true, but you do it just once :slight_smile: I now wonder if there’s already something for it on npm, hmm… :thinking:

5

maybe draftjs oder https://github.com/globocom/megadraft? It can handle special entities like links. But it’s also not that easy and needs some knowledge.

You could also use FlowRouter instead of react-route, because it detects anchor-tags automatically and prevents page-reload (this behavoir is usually annoying in more complex react-apps but in this case it would be a bless…)

1 Like
6

MegaDraft looks like it might work. Have to look into it.