Beginner React query（要素を削除して別の要素を追加する方法）

Question

Reactの学習を始めたばかりで、いくつかのガイドを経て、Markdown Previewerを作成しようとしました。私はそれを成功裏に構築する。しかし、私は何か他のものが欲しかった、私は<textarea>を作成した後、ユーザーがボタンをクリックした後、それ自身でHTMLをレンダリングする（これは不可能である）。したがって、<textarea>を削除し、レンダリングされたHTMLにdivを追加する方法はありますか？

つまり、<textarea>を削除してから、ユーザーがボタンをクリックしたときに新しい<div>を追加するにはどうすればいいですか？

質問が明確でない場合は、紛失したものだけをコメントしてください。私はそれを編集します。値下げ

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

ため

JSXは、ここでは、テキストエリアとアプリケーションの状態に基づいてHTMLのレンダリングを切り替えることternary statementを使用する必要がありますjsfiddle

Answer 1

です。私はこれを示すために<App />コンポーネントを更新しました：キーの部分は{ this.state.showHtml ? this.renderHtml() : this.renderTextarea() }行です。これにより、showHtmlが設定されているかどうかがチェックされます。そうであればHTML版をレンダリングし、そうでない場合は代わりにテキストエリアをレンダリングします。

また、showHtmlの状態を切り替えるボタンを追加し、テキストエリアとHTMLコンポーネントを別々の機能に移動しました。ちょっと整理する必要がありますが、これで要点がわかります。

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