Wie man Markdown erhält, um innerhalb mehrerer ReactJS-Komponenten zu arbeiten

Question

Ich bin ziemlich neu zu reagierenJS und ich bin auf ein Problem gestoßen, für das ich Hilfe benötige. Ich habe gesucht und gesucht, um das selbst zu klären, konnte es aber nicht. (Ich las mehrere Komponenten Rendering - aber es ist nicht die Lösung für das Problem, das ich hier habe)

Hier ist eine Beschreibung dessen, was ich zu tun versuche.

Meine Renderfunktion ruft eine bestimmte Komponente namens "Board" auf. Dies ist die übergeordnete Komponente, die die untergeordnete Komponente "Notes" anzeigt. Beim Rendern von Board werden auf Knopfdruck auf der Seite Notizen auf dem Bildschirm hinzugefügt (so etwas wie klebrige gelbe Noten). Bitte beachten Sie beigefügte Bild zu helfen

Das Problem ist jedoch, ich versuche, die Verwendung von Markup-Text innerhalb dieser gelben Notizen, die zufällig auf dem Bildschirm positioniert werden, aber alles, was ich getan habe funktioniert nicht. Hier ist der Code unten und ich erklären Somethings ich auch in den Code-Kommentaren versucht haben ...

import React, { Component } from 'react'; 
    import marked from 'marked'; 
    import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
    import './App.css'; 

    var Note = React.createClass({ 
    getInitialState() { 
    return {editing: false}; 
    }, 

    componentWillMount() { 
    //randomly place the notes on Board and rotate them 
    this.style = { 
    right: this.randBtw(0, window.innerWidth - 150) + 'px', //150 = note size 
    top: this.randBtw(0, window.innerHeight - 150) + 'px', 
    transform: 'rotate(' + this.randBtw(-15, 15) + 'deg)' 
    }; 
    }, 

    randBtw(min, max) { 
    //generate random numbers to be used in positioning the notes within the browser window 
    min = Math.ceil(min); 
    max = Math.floor(max); 
    return Math.floor(Math.random() * (max - min)) + min; 
    }, 

    edit() { 
    this.setState({editing: true}); 
    }, 

    rawMarkup() { 
    return {__html: marked(this.props.children)}; 
    }, 

    save() { 
    //i tried this: I tried getting (this.refs.textarea.value) and parsing it via markdown. However i figured out 
//that I couldn't since the ref, "textarea" since it existed on a different state. I guess that's the reason 

    this.props.onChange(this.refs.textarea.value, this.props.index); //this is where the index passed unto Board comes to play 
    this.setState({editing: false}); 
    }, 

    remove() { 
    this.props.onRemove(this.props.index); 
    }, 

    displayEditing() { 
    return (
    <div className='note' style={this.style}> 
    <textarea ref='textarea' defaultValue={this.props.children} className='form-control'></textarea> 
    <button onClick={this.save} className='btn btn-success btn-sm glyphicon glyphicon-floppy-disk'/> 
    </div> 
); 
    }, 

    displayDefault() { 
    //I tried this: remove this.props.children and do dangerouslySetInnerHTMl = {this.rawMarkup()}... 
    return (
    <div className="note" style={this.style}> 
     <p>{this.props.children}</p> 
     <span> 
      <button onClick={this.edit} className='btn btn-primary glyphicon glyphicon-pencil'/> 
      <button onClick={this.remove} className='btn btn-danger glyphicon glyphicon-trash'/> 
     </span> 
    </div> 
); 
    }, 
    render() { 
    if (this.state.editing) { 
    return this.displayEditing(); 
    }else { 
    return this.displayDefault(); 
    } 
    } 
    }) 

var Board = React.createClass({ 
propTypes: { 
count: function(props, propName) { 
    if (typeof props[propName] !== 'number') { 
    return new Error('The count property must be a number'); 
    } 
    if (typeof props[propName] > 100) { 
    return new Error('Creating' + props + ' notes doesn\'t make sense'); 
    } 
} 
}, 
getInitialState() { 
return { 
    notes: [] 
}; 
}, 

nextId() { 
this.uniqueId = this.uniqueId || 0; 
return this.uniqueId++; 
}, 

remove(i) { 
var arr = this.state.notes; //store state of notes 
arr.splice(i, 1); 
this.setState({notes: arr}); 
}, 

add(text) { 
//see bind in render fxn. This sets the default 'text' to 'new notes' 
var arr = this.state.notes; 
arr.push({ 
    id: this.nextId(), 
    note: text 
}); 
this.setState({notes:arr}); 
}, 

update(newText, i) { 
var arr = this.state.notes; //store state of notes 
arr[i].note = newText; 
this.setState({notes: arr}); 
}, 

eachNote(note, i) { 
return (
     //pass in props. Also index is quite important so exact Note can be accessed by Note 
     <Note 
      key={note.id} 
      index={i} 
      onChange={this.update} 
      onRemove={this.remove} 
     >{note.note}</Note> //TODO: remove child {note.note} ?? 
     ); 
    }, 

render() { 
    return (
    <div className='board'> 
     {this.state.notes.map(this.eachNote)} 
     <button onClick={this.add.bind(null, 'New Note')} className='btn btn-sm btn-success glyphicon glyphicon-plus '/> 
    </div> 
) 
    } 
}) 

class App extends Component { 
render() { 
return (
    <div> 
    <Board count={120}/> 
    </div> 
); 
} 
} 

export default App; 

animated gif showing the problem encountered

Answer 1

ich es zu gehen hat und folgende sollte funktionieren.

Ändern Sie diese Zeile:

<p>{this.props.children}</p> 

etwas wie folgt aus:

<p dangerouslySetInnerHTML={this.rawMarkup()}/>