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

您需要使用ternary statement根据应用的状态在呈现textarea和HTML之间切换。我已更新<App />组件以显示此信息：关键部分是{ 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>
        )
    }
});

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

1 个答案: