[英]How to render a component using innerHTML in React jsx
我目前正在编写可在两个视图(图形和列表)之间切换的功能。 两个是视图容器的类的名称。
toggleGraphView() { const two = document.getElementsByClassName('two')[0]; two.innerHTML = '<span>Graph View!</span>' } toggleListView() { const two = document.getElementsByClassName('two')[0]; two.innerHTML = "<ShotLog shotLog={this.state.shotLog}/>" }
该组件可以很好地切换到图形视图文本(“图形视图!”),但是当我尝试切换回列表视图时,什么也没得到。 在触发toggleListView之后,在chrome工具中,这两个容器包含<shotlog shotlog="{this.state.shotLog}/"></shotlog>
。 我需要它看起来像<ShotLog shotLog={this.state.shotLog}/>
才能正确传递道具。
我不确定多余的报价来自哪里。 有任何想法吗?
我不是ReactJS的专家,但是我认为您应该返回适当的内容,而不是尝试通过JS进行更改:
toggleView() {
if (this.isGraphView()) {
return <span>Graph View!</span>;
} else {
return <ShotLog shotLog={this.state.shotLog}/>
}
}
您不能通过使用JSX将它们放入字符串中来创建React组件,您的代码可以缩短为以下内容:
this.state.showGraph ? <span>Graph View!</span> : <ShotLog shotLog={this.state.shotLog} />
使用三元条件,您可以根据变量showGraph
的值来决定要呈现的showGraph
showGraph
将存储在组件的状态下,可通过this.state
访问,当您想更改状态下某物的值时,必须调用setState
,这将导致您的组件重新呈现屏幕上的所有内容并向您显示你要
工作示例:
class ShotLog extends React.Component { render() { return <div>Hi I'm a ShotLog</div> } } class App extends React.Component { constructor(props){ super(props) this.state = { showGraph: true } } handleClick = ev => { this.setState({ showGraph: !this.state.showGraph }) } render() { return ( <div> {this.state.showGraph ? <span>Graph View!</span> : <ShotLog />} <button onClick={this.handleClick}>Switch me !</button> </div> ) } } ReactDOM.render( <App/>, document.getElementById('react') )
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script> <div id="react"></div>
您可以在以下官方文档中找到JSX的基础知识: https : //reactjs.org/docs/introducing-jsx.html
您可以在此处了解有关组件状态的更多信息: https : //reactjs.org/docs/state-and-lifecycle.html
结合@Justinas的答案,您可以尝试执行条件渲染,而不是使用纯JS进行。 您可以尝试如下操作:
MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {currView: 'graph'};
}
handleToggle() {
if (this.state.currView === 'graph') {
this.setState({currView: 'otherView'});
} else {
this.setState({currView: 'graph'});
}
}
render() {
if(this.state.currView === 'graph') {
// render your 'graph' view
} else {
// render some other view
}
}
}
组件状态的更改将导致重新渲染,因此它应该完全更改以前存在的任何内容。 只要确保您有可以切换或更新状态的东西即可:)
PS对不起,如果我在react相关语法中犯了一些错误。 现在没有IDE大声笑
您可以使用react方法来切换视图,而不是尝试直接使用document.getElementsByClassName访问dom。 您可以在下面参考我的示例。
class TestComponent
{
constructor(props) {
super(props);
this.state = {
view: 'list',
shotLog: someVal
}
handleToggle() {
const modifiedView= this.state.view == 'graph'? 'list': 'graph';
this.setState(() => {
return {view: modifiedView};
});
}
}
render() {
const {view, shotLog} = this.state;
<div>
<button onClick={this.handleToggle}> Toggle </button>
{view == 'graph'} && <span> Graph View! </span>
{view == 'list'} && <ShotLog shotLog={shotLog} />
</div>
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.