Is there a way around a tree created by React?

Question

I need to create a visual editor for an HTML page. ReactJS seems to be a good choice for this. I am currently facing the following problem:

I modeled my data:

var Model = { title: 'Hello', description: 'Pellentesque eleifend urna ac purus tempus...', date: new Date().toString() }; 

And the built-in component that stores its data inside the specified structure:

 var App = React.createClass({ getInitialState: function () { return { value: Model } }, handleMouseEnter: function (event) { $(event.target).css('outline', '1px solid red').attr('contenteditable', true); }, handleMouseLeave: function (event) { var t = $(event.target), v = this.state.value; t.css('outline', 'none').attr('contenteditable', false); v[t.attr('property')] = t.text(); this.setState({value: v}); }, render: function () { var v = this.state.value; return ( <div> <pre style={{whiteSpace: 'normal'}}>{JSON.stringify(this.state)}</pre> <h1 onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="title">{v.title}</h1> <p onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="description">{v.description}</p> <p onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="date">{v.date}</p> </div> ); } }); React.renderComponent(<App />, document.getElementById('app')); 

In this particular case, this works. But I want to get rid of the onMouseEnter and onMouseLeave and leave only the property field. For instance:

 <pre style={{whiteSpace: 'normal'}}>{JSON.stringify(this.state)}</pre> <h1 property="title">{v.title}</h1> <p property="description">{v.description}</p> <p property="date">{v.date}</p> 

I was thinking about creating a mixin. Then, inside the componentDidMount event, attach handlers to all elements with the property attribute. But I did not find a way to achieve this.

My question is: Is there a way around the tree created by React? I noticed that React Developer Tools (Chrome Extension) can do this.

Similar question: React.js component creating parent child relations and iteration

Answer 1

So you want:

 <h1 onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} property="title">{v.title}</h1> 

a

 <h1 property="title">{v.title}</h1> 

I would use another Component for this, which takes care of rendering this particular type of component, for example redux-form does.

The simplest approach to achieving what you want to do would be something like this:

 class MyField extends Component { constructor(props) { super(props); this.handleMouseEnter = this.handleMouseEnter.bind(this); } handleMouseEnter() { ... } render() { const { property, children } = this.props; if (property === 'title') { return ( <h1 onMouseEnter...>{children}</h1> ); } } } 

Then you will call it like this on any other component:

 <MyField property="title">Stackoverflow</MyField> 

A more professional, but also more complex approach would be to implement Field , on which they even use React.createElement to generate HTML (which I do with if-else in the example above).

If you need to access any of its data outside of it, either you pass a function to it through properties, or connect this component of MyField to an abbreviation (this also does the reduction form).

I would also pass through the details any specific one-time styles that you want to apply to your MyField components.