初學者反應查詢（如何刪除元素並附加另一個元素）

Question

我剛剛開始學習React，在瀏覽了一些指南之后，我嘗試制作Markdown預覽器。 我成功建立了它。 但是我想要別的東西，我想創建一個<textarea>然后在用戶寫完之后然后當他們點擊一個按鈕時，它會自己呈現HTML（這是不可能的）。 那么，有沒有辦法刪除<textarea>並使用呈現的HTML追加div。

我的意思是，如何刪除<textarea> ，然后在用戶點擊按鈕時附加一個新的<div> ？

如果問題不明確，只需評論遺漏的內容，我將對其進行編輯。

Markdown的JSX

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

這是jsfiddle

Answer 1

您需要使用三元語句在基於應用程序狀態呈現textarea和HTML之間切換。 我已經更新了<App />組件來顯示：關鍵部分是{ this.state.showHtml ? this.renderHtml() : this.renderTextarea() } { this.state.showHtml ? this.renderHtml() : this.renderTextarea() }行。 這將檢查是否設置了showHtml ; 如果是這樣，它將呈現HTML版本，如果不是，則呈現textarea。

我還添加了一個切換showHtml狀態的按鈕，並將textarea和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>
        )
    }
});