如何在React jsx中使用innerHTML渲染組件

Question

我目前正在編寫可在兩個視圖（圖形和列表）之間切換的功能。 兩個是視圖容器的類的名稱。

  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}/>才能正確傳遞道具。

我不確定多余的報價來自哪里。 有任何想法嗎？

Answer 1

我不是ReactJS的專家，但是我認為您應該返回適​​當的內容，而不是嘗試通過JS進行更改：

  toggleView() {
      if (this.isGraphView()) {
          return <span>Graph View!</span>;
      } else {
          return <ShotLog shotLog={this.state.shotLog}/>
      }
  }

Answer 2

您不能通過使用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

Answer 3

結合@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大聲笑

Answer 4

您可以使用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>
}



}