Написание HTML-тегов в реакции и потоке

Question

Я преподаю себе REACT/FLUX frameworks.I этот раздел html.

<article class="column_grid_5 " data-id="2"> 
     <div class="image"> 
      <a href="#"><img src="img/1.jpg" alt=""></a> 
      <span></span> 
     </div> 
     <hgroup> 
      <h1><a href="#">13</a></h1> 
      <h2><a href="#">Title</a></h2> 
     </hgroup> 

     <form method="post" action=""> 
      <ul> 
       <li> 
        <h3>cube</h3> 

        <strong>R1.90</strong> 

        <input autocomplete="off" type="text" name="quantity_single"> 
        <label>qty</label> 
       </li> 
       <li class="second"> 
        <h3>Pkt</h3> 

        <strong>R9.06</strong> 

        <input autocomplete="off" type="text" name="quantity_case"> 
        <label>qty</label> 
       </li> 
      </ul> 


      <div class="buttons"> 
       <a href="#" class="button detail">Details</a> 
       <input type="submit" value="Add to cart" class="button"> 
      </div> 
     </form> 
    </article> 

У меня есть все другие разделы кода, работающие fine.I хотели бы, чтобы сделать приведенный выше код, используя это делают function.I я, однако, возникли проблемы с моей визуализации функции

 render: function() { 
      var e = this.state.inBasket ? "is-inBasket " : "", 
       t = { 
        transitionDelay: .25 * this.props.index + "s" 
       }; 
      return n.createElement("article", { 
       style: t, 
       className: "column_grid_5" 
      }, n.createElement("div", { 
       className: "appItem appItem--" + e 
      }, n.createElement("h4", { 
       className: "appItem-title truncate" 
      }, n.createElement("div", { 
       className: "image" 
      }, this.props.item.name), n.createElement("img", { 
       className: "", 
       src: this.props.item.image, 
       alt: "" 
      }), n.createElement("hgroup", { 
       className: "" 
      }, this.props.item.name), n.createElement("h2", { 
       className: "" 
      }), n.createElement("div", { 
       className: "appItem-price" 
      }, "$ ", this.props.item.price, ".00"), n.createElement("div", { 
       className: "appItem-qty" 
      }, "x ", this.props.item.qty), n.createElement("div", { 
       className: "basketControls" 
      }, this.getBasketControls())))) 
     } 

я получаю это выход:

<article style="transition-delay:0s;" class="column_grid_5 itemTransition-enter itemTransition-enter-active" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0"><div class="appItem appItem--" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0"><h4 class="appItem-title truncate" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0"><div class="image" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.0">Title</div><img class="" src="images/white/1.jpg" alt="" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.1"><hgroup class="" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.2">Title</hgroup></h4><h2 class="" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.3"></h2><div class="appItem-price" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.4"><span data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.4.0">$ </span><span data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.4.1">21</span><span data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.4.2">.00</span></div><div class="appItem-qty" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.5"><span data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.5.0">x </span></div><div class="basketControls" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.6"><button class="addBasket button" data-reactid=".0.0.0.0.2.0.1.$=1$white:0.0.1.$=1$1:0.0.0.6.0">Add to basket</button></div></div></article> 

Любые указатели в правильном направлении будут оценены

Answer 1

Вы действительно должны использовать JSX для этого. Пример:

render: function() { 
    return (
    <article class="column_grid_5 " data-id="2"> 
     <div class="image"> 
      <a href="#"><img src="img/1.jpg" alt=""></a> 
      <span></span> 
     </div> 
     <hgroup> 
      <h1><a href="#">13</a></h1> 
      <h2><a href="#">Title</a></h2> 
     </hgroup> 

     <form method="post" action=""> 
      <ul> 
       <li> 
        <h3>cube</h3> 

        <strong>R1.90</strong> 

        <input autocomplete="off" type="text" name="quantity_single"> 
        <label>qty</label> 
       </li> 
       <li class="second"> 
        <h3>Pkt</h3> 

        <strong>R9.06</strong> 

        <input autocomplete="off" type="text" name="quantity_case"> 
        <label>qty</label> 
       </li> 
      </ul> 


      <div class="buttons"> 
       <a href="#" class="button detail">Details</a> 
       <input type="submit" value="Add to cart" class="button"> 
      </div> 
     </form> 
    </article> 
); 
} 

Я буквально скопировал предоставленный вами HTML и считая, что HTML действителен, это сработает. Теперь все, что вам нужно для разработки, - это получение данных в ваш HTML из состояния и/или реквизита.