Gibt es eine Möglichkeit, den von React erstellten Baum zu durchqueren?

Question

Ich brauche einen visuellen Editor für eine HTML-Seite zu bauen. Es scheint, dass ReactJS dafür eine gute Wahl ist. Zur Zeit stand ich mit folgendem Problem:

ich meine Daten modelliert:

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

Und mit der integrierten Komponente, die ihre Daten in der obigen Struktur speichert:

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 diesem speziellen Fall es funktioniert. Aber ich will loswerden onMouseEnter und onMouseLeave Eigenschaften und nur property Feld zu bleiben. Wie folgt aus:

<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> 

dachte ich über mixin zu schaffen. Dann innerhalb componentDidMount Ereignis, fügen Sie Handler für alle Elemente mit property Attribut. Aber ich habe keinen Weg gefunden, dies zu erreichen.

Meine Frage ist: Gibt es eine Möglichkeit Baum durch Reagieren gebaut zu durchqueren? Ich bemerkte, dass Reagieren Developer Tools (Chrome Extension) das tun kann.

ähnliche Frage: React.js component creating parent child relations and iterating

Answer 1

Sie will also:

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

als

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

ich eine andere Component dafür verwenden würde, das kümmert mich um die Wiedergabe von dieser bestimmten Art von Komponenten, wie redux-form tut.

Der einfachste Ansatz zu erreichen, was man so etwas wäre zu tun:

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> 
    ); 
    } 
    } 
} 

Dann würde rufen Sie es wie folgt auf jede andere Komponente:

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

Ein professioneller, aber auch schwieriger Ansatz wäre Redux-Form-Implementierung von Field, auf dem sie sogar React.createElement verwenden, um HTML zu generieren (was ich mit if-else im obigen Beispiel tun).

Wenn Sie auf Daten außerhalb davon zugreifen müssen, übergeben Sie entweder eine Funktion über Eigenschaften oder verbinden Sie die Komponente MyField mit redux (redux-form tut dies auch).

ich auch durch Requisiten irgendwelche spezifischen einmalige Stile, die Sie auf Ihre MyField Komponenten anwenden möchten passieren würde.