初学者反应查询（如何删除元素并附加另一个元素）

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