Anfänger Reaction query (Wie entferne ich ein Element und füge ein anderes Element hinzu)

Question

Ich habe gerade angefangen React zu lernen und nachdem ich einige Anleitungen durchgelesen habe, habe ich versucht einen Markdown Previewer zu erstellen. Ich baue es erfolgreich. Aber ich wollte etwas anderes, ich wollte ein <textarea> machen, dann nachdem der Benutzer es geschrieben hat, wenn sie auf einen Knopf klicken, rendert es das HTML auf sich selbst (was nicht möglich ist). Also, gibt es eine Möglichkeit, die <textarea> zu entfernen und ein Div mit dem gerenderten HTML anzuhängen.

Ich meine, wie kann ich die <textarea> entfernen und dann eine neue <div> anfügen, wenn der Benutzer auf die Schaltfläche klickt?

Wenn die Frage nicht klar ist, nur kommentieren, was fehlt, werde ich es bearbeiten.

JSX für die Markdown

const example = `Heading 
======= 

Sub-heading 
----------- 

### Another deeper heading 

Paragraphs are separated 
by a blank line. 

Leave 2 spaces at the end of a line to do a 
line break 

Text attributes *italic*, **bold**, ` + 
' `monospace`' + `, ~~strikethrough~~ . 

Shopping list: 

    * apples 
    * oranges 
    * pears 

Numbered list: 

    1. apples 
    2. oranges 
    3. pears 

The rain---not the reign---in 
Spain. 

*[Lavios](kdsbjhsdbhjfbdjbs)*` 


const App = React.createClass({ 
    getInitialState() { 
     return { 
      data: example 
     } 
    }, 
    updateVal(e) { 
     this.setState({ 
      data: e.target.value 
     }); 
    }, 
    render() { 
     return (
      <div id="app"> 
       <div id="app-inside-first"> 
        <textarea rows='35' cols='20' value={this.state.data} onChange={this.updateVal}/> 
       </div> 
       <div id="app-inside-second"> 
        <Markdown stats={this.state.data} /> 
       </div> 
      </div> 
     ) 
    } 
}); 

const Markdown = React.createClass({ 
    render() { 
     let render_content = markdown.toHTML(this.props.stats); 
     return (
      <div dangerouslySetInnerHTML={{__html: render_content}} /> 
     ) 
    } 
}); 

ReactDOM.render(<App />, document.getElementById("container")); 

Hier ist der jsfiddle

Answer 1

Sie erhalten eine ternary statement, um zwischen den Textbereich Rendering und den HTML-Code basiert auf der App-Zustand verwenden müssen. Ich habe die <App /> Komponente aktualisiert, um dies zu zeigen: der Schlüsselteil ist die { this.state.showHtml ? this.renderHtml() : this.renderTextarea() } Linie. Dies prüft, ob showHtml gesetzt ist; Wenn dies der Fall ist, wird die HTML-Version gerendert, und wenn nicht, wird stattdessen der Textbereich gerendert.

Ich fügte auch eine Schaltfläche hinzu, die den showHtml -Status umschaltet und die Textarea und HTML-Komponenten in separate Funktionen verschoben hat - Sie müssen ein bisschen aufräumen, aber das sollte Ihnen den Kern geben.

const App = React.createClass({ 
    getInitialState() { 
     return { 
      data: example 
     } 
    }, 
    updateVal(e) { 
     this.setState({ 
      data: e.target.value 
     }); 
    }, 

    // render the output 
    renderHtml() { 
     return (
      <div dangerouslySetInnerHTML={{__html: render_content}} /> 
     ); 
    }, 

    // render the textarea 
    renderTextarea() { 
     return (
      <textarea rows='35' cols='20' value={this.state.data} onChange={this.updateVal}/> 
     ); 
    }, 

    // toggle the showHtml state when the button is clicked 
    handleClick() { 
     this.setState({ showHtml: !this.state.showHtml }); 
    }, 

    render() { 
     return (
      <div id="app"> 

       // switch between textarea and output on click 
       <button onClick={ this.handleClick }>Show HTML</button> 

       <div id="app-inside-first"> 

        // key bit! if this.state.showHtml is true, render 
        // output, otherwise render textarea 
        { this.state.showHtml ? this.renderHtml() : this.renderTextarea() } 
       </div> 
       <div id="app-inside-second"> 
        <Markdown stats={this.state.data} /> 
       </div> 
      </div> 
     ) 
    } 
});