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

Beginner React query(How to remove a element and append another element)

本文关键字：元素 一个 另一个 删除 查询 何删除 初学者      更新时间：2023-09-26

我刚开始学习React，在阅读了一些指南后，我尝试制作Markdown预览器。我成功地构建了它。但我想要其他东西，我想制作一个<textarea>，然后在用户写完之后，当他们点击按钮时，它会在自己身上呈现HTML（这是不可能的）。那么，有没有一种方法可以删除<textarea>并用渲染的HTML附加一个div。

我的意思是，当用户点击按钮时，我如何删除<textarea>，然后添加一个新的<div>？

如果问题不清楚，只需评论缺失的内容，我会编辑它。

降价的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

您需要使用一个三元语句来根据应用程序的状态在呈现文本区域和HTML之间切换。我已经更新了<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>
        )
    }
});
相关文章：