[英]Beginner React query(How to remove a element and append another element)
I've just started learning React and after going through some guides, I tried making a Markdown Previewer. 我刚刚开始学习React,在浏览了一些指南之后,我尝试制作Markdown预览器。 I successfully build it.
我成功建立了它。 But I wanted something else, I wanted to make a
<textarea>
then after the user has written on it then when they click on a button, it renders the HTML on itself(which isn't possible). 但是我想要别的东西,我想创建一个
<textarea>
然后在用户写完之后然后当他们点击一个按钮时,它会自己呈现HTML(这是不可能的)。 So, is there a way to remove the <textarea>
and append a div with the rendered HTML. 那么,有没有办法删除
<textarea>
并使用呈现的HTML追加div。
I mean, how can I remove the <textarea>
and then append a new <div>
with when the user clicks on the button? 我的意思是,如何删除
<textarea>
,然后在用户点击按钮时附加一个新的<div>
?
If the question isn't clear, just comment what is missing, I'll edit it. 如果问题不明确,只需评论遗漏的内容,我将对其进行编辑。
JSX for the Markdown 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"));
You'll need to use a ternary statement to switch between rendering the textarea and the HTML based on the app's state. 您需要使用三元语句在基于应用程序状态呈现textarea和HTML之间切换。 I've updated the
<App />
component to show this: the key part is the { this.state.showHtml ? this.renderHtml() : this.renderTextarea() }
我已经更新了
<App />
组件来显示:关键部分是{ this.state.showHtml ? this.renderHtml() : this.renderTextarea() }
{ this.state.showHtml ? this.renderHtml() : this.renderTextarea() }
line. { this.state.showHtml ? this.renderHtml() : this.renderTextarea() }
行。 This checks whether showHtml
is set; 这将检查是否设置了
showHtml
; if so, it renders the HTML version, and if not, renders the textarea instead. 如果是这样,它将呈现HTML版本,如果不是,则呈现textarea。
I also added a button which toggles the showHtml
state, and moved the textarea and HTML components to separate functions - you'll need to do a bit of tidying up but this should give you the gist. 我还添加了一个切换
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>
)
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.