Блог

Я обучаю себя фреймворкам REACT / FLUX.У меня есть этот раздел 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>
  

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

         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>
  

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

Вы действительно должны использовать 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 из state и / или props.