Как визуализировать компонент, используя innerHTML в React jsx

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}/>"
  }

Компонент просто отлично переключается на текст графического представления ('Graph View!'), Но когда я пытаюсь переключиться обратно на просмотр списка, я ничего не получаю.После запуска toggleListView в инструментах Chrome два контейнера содержат <shotlog shotlog="{this.state.shotLog}/"></shotlog>.Мне нужно, чтобы он выглядел как <ShotLog shotLog={this.state.shotLog}/>, чтобы правильно пропускать реквизит.

Я не уверен, откуда взялись дополнительные цитаты.Есть идеи?

Answer 1

Вместо того, чтобы пытаться получить доступ к DOM напрямую, используя document.getElementsByClassName, вы можете использовать способ реакции для переключения вида.Вы можете взять ссылку на мой пример ниже.

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>
}



}

Answer 2

Вы не можете создавать компоненты React, помещая их в строки, используя JSX, ваш код можно сократить до следующего:

this.state.showGraph ? <span>Graph View!</span> : <ShotLog shotLog={this.state.shotLog} />

Используя троичное условие, вы можете решить, что отображать, в зависимости отзначение переменной 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 Извините, если я допустил некоторые ошибки в синтаксисе реагирования.Нет IDE сейчас LOL

Answer 4

Я не эксперт по ReactJS, но я думаю, что вы должны вернуть правильный контент, а не пытаться изменить его через JS:

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