Question

我试图从Thinking in React定义ProductCategoryRow和let component = ReasonReact.statelessComponent("ProductRow"); let make = (~name, ~price, _children) => { ...component, render: (_self) => { <tr> <td>{ReasonReact.stringToElement(name)}</td> <td>{ReasonReact.stringToElement(price)}</td> </tr> } };。

productRow.re

let component = ReasonReact.statelessComponent("ProductCategoryRow");

let make = (~title: string, ~productRows, _children) => {
  ...component,
  render: (_self) => {
    <div>
        <th>{ReasonReact.stringToElement(title)}</th>
    </div>
  }
};

productCategoryRow.re

map

我认为我需要productRows List of ProductRow，productRow => <td>productRow</td>，from bs4 import BeautifulSoup as soup import requests import re s = soup(requests.get('http://www.newegg.com/Video-Cards-Video-Devices/Category/ID-38?', proxies={'http':'67.63.33.7:80'}).text, 'lxml') new_data = [filter(lambda x:len(x) > 1, [re.sub('\s{4}', '', re.sub('[\n\r]+', '', b.text)) for b in i.find_all(re.compile('a|li'), {'class':re.compile('item-title|price-current|price-ship')})]) for i in s.find_all('div', {'class':"item-container"})]，功能为：[[u'GIGABYTE AORUS GeForce GTX 1080 Ti DirectX 12 GV-N108TAORUS X-11GD 11GB ...', u'$1,039.99\xa0\u2013'], [u'EVGA GeForce GTX 1050 SC GAMING, 02G-P4-6152-KR, 2GB GDDR5, DX12 OSD Support (PXOC)', u'|$149.99\xa0(9 Offers)\u2013', u'(9 Offers)', u'$4.99 Shipping'], [u'ASUS GeForce GTX 1050 PH-GTX1050-2G Video Card', u'|$139.99\xa0(6 Offers)\u2013', u'(6 Offers)', u'$4.99 Shipping'], [u'ZOTAC GeForce GTX 1050 DirectX 12 ZT-P10500A-10L Video Card', u'|$134.99\xa0(4 Offers)\u2013', u'(4 Offers)', u'$4.99 Shipping'], [u'MSI GeForce GTX 1050 DirectX 12 GTX 1050 2GT LP Video Cards', u'|$139.99\xa0(2 Offers)\u2013', u'(2 Offers)', u'$4.99 Shipping'], [u'XFX Radeon RX 560 DirectX 12 RX-560P4SFG5 Video Card', u'|$179.99\xa0\u2013', u'$4.99 Shipping'], [u'GIGABYTE Radeon RX 550 DirectX 12 GV-RX550D5-2GD Video Card', u'|$109.99\xa0(2 Offers)\u2013', u'(2 Offers)', u'$3.99 Shipping'], [u'ZOTAC GeForce GT 1030 2GB GDDR5 64-bit PCIe 3.0 DirectX 12 HDCP Ready Low Profile Video Card ZT-P10300A-10L', u'|$89.99\xa0(4 Offers)\u2013', u'(4 Offers)', u'$3.99 Shipping'], [u'MSI Radeon R7 250 DirectX 12 R7 250 2GD3 OC Video Card', u'(2 Offers)', u'$3.99 Shipping'], [u'EVGA GeForce GTX 1050 SSC GAMING ACX 3.0, 02G-P4-6154-KR, 2GB GDDR5, DX12 OSD Support (PXOC)', u'(4 Offers)', u'Free Shipping'], [u'ASUS GeForce GT 1030 2GB GDDR5 HDMI DVI Graphics Card (GT1030-2G-CSM)', u'(12 Offers)', u'Free Shipping'], [u'XFX Radeon RX 560 DirectX 12 RX-560P2SFG5 Video Card', u'|$139.99\xa0\u2013', u'$4.99 Shipping']]。

在这个例子中我该怎么做？

或者，如果我完全不合适，请解释我如何实现上述目标。

Answer 1

在反思中的思考＆＃39;在页面中，组件嵌套层次结构使ProductTable包含多个ProductRow s。我们可以通过映射产品数组并生成ProductRow s作为输出，在ReasonReact中对其进行建模。 E.g：

type product = {name: string, price: float};

/* Purely for convenience */
let echo = ReasonReact.stringToElement;

module ProductRow = {
  let component = ReasonReact.statelessComponent("ProductRow");
  let make(~name, ~price, _) = {
    ...component,
    render: (_) => <tr>
      <td>{echo(name)}</td>
      <td>{price |> string_of_float |> echo}</td>
    </tr>
  };
};

module ProductTable = {
  let component = ReasonReact.statelessComponent("ProductTable");
  let make(~products, _) = {
    ...component,
    render: (_) => {
      let productRows = products
        /* Create a <ProductRow> from each input product in the array. */
        |> Array.map(({name, price}) => <ProductRow key=name name price />)
        /* Convert an array of elements into an element. */
        |> ReasonReact.arrayToElement;

      <table>
        <thead>
          <tr> <th>{echo("Name")}</th> <th>{echo("Price")}</th> </tr>
        </thead>
        /* JSX can happily accept an element created from an array */
        <tbody>productRows</tbody>
      </table>
    }
  };
};

/* The input products. */
let products = [|
  {name: "Football", price: 49.99},
  {name: "Baseball", price: 9.99},
  {name: "Basketball", price: 29.99}
|];

ReactDOMRe.renderToElementWithId(<ProductTable products />, "index");

将React组件传递给另一个组件？

1 个答案: