Видимость переключающих элементов

Question

Я создаю веб-приложение, в котором вы можете настроить велосипед. Вы можете выбрать детали, и если вы нажмете на часть, будет показано изображение части, поэтому ее стиль изменится с none на block. Я хотел использовать ReactJS, но мне сложно понять это. Я не мог найти лучший способ скрыть те элементы, которые я хочу, кроме jQuery. Это то, что я в моем коде:

var bikeInfo = { 
    parts: [ 
     { 
      id: 1, 
      img: "http://designyourbike.ch/dyb_img/parts/154-2015071616148075.png", 
      style: { 
       top: 0, 
       left: "432px", 
       display: "none" 
      } 
     }, 
     { 
      id: 2, 
      img: "http://designyourbike.ch/dyb_img/parts/189-2015071616141931.png", 
      style: { 
       top: 0, 
       left: "432px", 
       display: "none" 
      } 
     } 
    ] 
} 

var Nav = React.createClass({ 
    handleClick: function(e) { 
     e.preventDefault(); 

     var partID = e.target.getAttribute("data-part"); 

     $(".part").hide(); 
     $("#part-" + partID).show(); 
    }, 
    render: function() { 
     var parts = this.props.bikeInfo.parts; 

     var _this = this; 

     return (
      <div className="nav"> 
       { 
        parts.map(function(part) { 
         return (
          <a href="#" data-part={part.id} onClick={_this.handleClick}>{"Part " + part.id}</a> 
         ) 
        }) 
       } 
      </div> 
     ) 
    } 
}); 

var Bike = React.createClass({ 
    handleClick: function(e) { 
     e.preventDefault(); 
    }, 
    render: function() { 
     var parts = this.props.bikeInfo.parts; 

     return (
      <div> 
       <div className="parts"> 
        <img src="http://designyourbike.ch/dyb_img/parts/152-201506308399268.png" /> 

        { 
         parts.map(function(part) { 
          return (
           <img className="part" style={part.style} id={"part-" + part.id} src={part.img} onClick={this.handleClick} /> 
          ) 
         }) 
        } 
       </div> 
      </div> 
     ) 
    } 
}); 

React.render(<Nav bikeInfo={bikeInfo} />, document.getElementById("nav")); 
React.render(<Bike bikeInfo={bikeInfo} />, document.getElementById("bike")); 

Мой вопрос, есть ли другой способ (лучше, быстрее, React-иш путь) сделать это без использования JQuery вообще.

Живая JSFiddle текущего результата:

https://jsfiddle.net/69z2wepo/12521/

Answer 1

Я хотел бы добавить встроенный стиль для элемента, который вы хотите, чтобы скрыть и показать, чтобы это CSS устанавливается состояние компонентов. поэтому в любом случае вы обновляете отображаемое состояние: none или display: inherit.

Таким образом, нет необходимости скрывать и показывать jQuery.

Answer 2

Создайте компонент детали и передайте его видимость в реквизиты или, напротив, сохраните видимость в своем состоянии. В методе рендеринга Part возвращаем значение null, если часть, которая в настоящее время невидима, или возвращает ваш img-тег в противном случае.

В методе handleClick просто измените видимость детали. Реакция сделает все остальное.

Что-то вроде этого:

var Part = React.createClass({ 
    render: function(){ 
     if(!this.props.visible) { 
      return null; 
     } 
     return <img className="part" style={this.props.style} id={"part-" + this.props.id} src={this.props.src} onClick={this.handleClick} /> 
    } 
}); 
var Bike = React.createClass({ 
    render: function() { 
     var parts = this.props.bikeInfo.parts; 

     return (
      <div> 
       <div className="parts"> 
        <img src="http://designyourbike.ch/dyb_img/parts/152-201506308399268.png" /> 

        { 
         parts.map(function(part) { 
          return (
           <Part visible={part.visible} style={part.style} id={"part-" + part.id} src={part.img} onClick={this.handleClick}> 
          ) 
         }) 
        } 
       </div> 
      </div> 
     ) 
    } 
}); 

Answer 3

Я думаю, что наиболее «реагировать» способом было бы использовать государственные и реквизита. В компоненте Nav установите состояние для выбранной части. Затем в функции рендеринга добавьте компонент Bike в качестве дочернего элемента, который получает состояние детали в качестве опоры. Затем заставьте компонент Bike смотреть на реквизит, а не на bikeInfo, чтобы отобразить изображение. Я приложил код, чтобы дать вам идею ...

var bikeInfo = { 
 
    parts: [ 
 
     { 
 
      id: 1, 
 
      img: "http://designyourbike.ch/dyb_img/parts/154-2015071616148075.png", 
 
      style: { 
 
       top: 0, 
 
       left: "432px", 
 
       display: "none" 
 
      } 
 
     }, 
 
     { 
 
      id: 2, 
 
      img: "http://designyourbike.ch/dyb_img/parts/189-2015071616141931.png", 
 
      style: { 
 
       top: 0, 
 
       left: "432px", 
 
       display: "none" 
 
      } 
 
     } 
 
    ] 
 
} 
 

 
var Nav = React.createClass({ 
 
    getInitialState: function() { 
 
     return { part: {} }; 
 
    }, 
 
    handleClick: function(part) { 
 
     this.setState({part: part}); 
 
    }, 
 
    render: function() { 
 
     var parts = this.props.bikeInfo.parts; 
 
     
 
     var _this = this; 
 
     
 
     return (
 
      <div> 
 
       <div className="nav"> 
 
        { 
 
         parts.map(function(part) { 
 
         var boundClick = _this.handleClick.bind(null, part); 
 
          return (
 
           <a href="#" data-part={part.id} onClick={boundClick}>{"Part " + part.id}</a> 
 
          ) 
 
         }) 
 
        } 
 
       </div> 
 
      <div id="bike"> 
 
       <Bike part={this.state.part} /> 
 
      </div> 
 
      </div> 
 
      
 
      
 
     ) 
 
    } 
 
}); 
 

 
var Bike = React.createClass({ 
 
    handleClick: function(e) { 
 
    }, 
 
    render: function() { 
 
     return (
 
      <div> 
 
       <div className="parts"> 
 
        <img src="http://designyourbike.ch/dyb_img/parts/152-201506308399268.png" /> 
 
        <img className="part" style={this.props.part.style} id={"part-" + this.props.part.id} src={this.props.part.img} onClick={this.handleClick} /> 
 
       </div> 
 
      </div> 
 
     ) 
 
    } 
 
}); 
 

 
React.render(<Nav bikeInfo={bikeInfo} />, document.getElementById("nav"));