最近在学习React前端与合约交互，总结一下使用频次最多的几个方面的知识。

1.窗口布局

本着组件化开发的原则，一个主页面往往根据不同的功能，划分为多个组件，通过在主页面上渲染出各个子组件的形式，来实现网页的开发。主页面上各个组件的窗口布局，则主要通过antd的栅格（Grid）来控制。在栅格的和中，都可以通过style={}来指定高度，栅格的宽度则是将页面等分为24份，给定一个宽度为18，那么这个栅格就会占页面的3/4宽度。通常页面的宽度有两种，一种是占满整个页面，一种是两边会留白，根据UI设计来定义宽度即可。 对于一个中的元素，可以通过来水平排列多个子元素，比如导航栏中要显示多条信息，通过Space可以让这些的元素不至于挤在一起。当然通过在元素之间插入空格也可以实现这一功能，需要通过{` `}的形式。 在中的对齐方式，一般选靠上对齐。如果不想中的元素紧贴着上边沿，可以在上方再插入一个宽度为24的，自定义一下它的高度即可。 通过antd来进行网页布局的话，应该是套用一个布局框架，在框架内再通过栅格划分区域，每个栅格内的元素再通过来水平/竖直排列。 2.参数传递 通过前端和合约进行交互，需要先初始化一个合约。在主窗口进行初始化就行了，在渲染子组件的时候，将合约作为属性传递到组件当中，就可以直接调用合约了。通过小狐狸钱包进行链接后，也可以将账户作为属性传递到各个组件中去。 当需要从合约中获取一些数据作为属性传递给子组件的时候，需要用到异步函数来获取。这个时候，由于异步函数的特殊性，结果并不会马上返回，而是先渲染了子组件，然后才能接受到返回的数据。就是说，子组件初始化的时候，从主界面传过来的数据是空值。这个时候就需要注意一下了，当数据为空的时候，有些地方就会报错他，最好加上try{}。当异步函数的数据返回了以后，会重新渲染下子组件。 另外一个需要注意的细节，是子组件在接受属性的时候，要加上{}，如果不加{}，而传递多个属性的话，不会编译报错，但是运行的时候就会出现莫名其妙的报错了。 export default function Login({contract, accounts, setAccounts}) 3.页面自动刷新 对于页面中的表格或者列表，当其dataSource发生了改变，在页面上显示的内容并不会主动进行更新。我们需要通过useState的方式来触发组件的重新渲染。而对于表格或者列表的dataSource，一般是一个数组类型。当我们通过setState修改了其中某一个值的时候，由于其引用没有改变，只是改变了引用指向的内存数据，React认为虚拟DOM并没有改变，因此，不会重新渲染组件。这就会导致表格或列表组件的dataSource改变了，但是组件并没有重新渲染。解决的方法是给表格/列表的每一行赋予一个任意的属性，属性为一个布尔值，每次修改dataSource的时候，就将这个属性的布尔值取反，这样组件就会重新渲染了。 <List.Item id={id} ...//每一个item绑定一个属性 每次onClick的时候，修改属性： let _id=!id; setId(_id); 4.合约函数返回数据 有时候需要与合约交互，以获取数据。合约的函数通常有两种，一种是view函数，一种是非view函数。对于view函数，只需要通过contract.function（）调用合约函数就可以获得函数返回的值。注意合约函数是异步的，需要通过异步的形式来调用。对于非view函数，需要通过链上进行交互。此时，通过contract.function（）调用合约，await返回的值是一个链上交易，里面包含了tx、gas fee等参数。即便这个函数写了return，也无法通过ethers.js来获取到。这种情况下，需要在合约中让这个非view函数在被调用的时候触发一个事件event，当这个交易被链上确认了以后，这个函数绑定的event就可以在链下被查询到。进而event中包含的一些数据也就可以获取到了。 Example Code: const tx = await contract.view_comment(shopid,comment_index); const receipt = await tx.wait(); let _myarray = myArray; _myarray[comment_index].comment = receipt.events[1].args[1];

最近在学习React前端与合约交互，总结一下使用频次最多的几个方面的知识。

1.窗口布局

本着组件化开发的原则，一个主页面往往根据不同的功能，划分为多个组件，通过在主页面上渲染出各个子组件的形式，来实现网页的开发。主页面上各个组件的窗口布局，则主要通过antd的栅格（Grid）来控制。在栅格的和中，都可以通过style={}来指定高度，栅格的宽度则是将页面等分为24份，给定一个宽度为18，那么这个栅格就会占页面的3/4宽度。通常页面的宽度有两种，一种是占满整个页面，一种是两边会留白，根据UI设计来定义宽度即可。 对于一个中的元素，可以通过来水平排列多个子元素，比如导航栏中要显示多条信息，通过Space可以让这些的元素不至于挤在一起。当然通过在元素之间插入空格也可以实现这一功能，需要通过{` `}的形式。 在中的对齐方式，一般选靠上对齐。如果不想中的元素紧贴着上边沿，可以在上方再插入一个宽度为24的，自定义一下它的高度即可。 通过antd来进行网页布局的话，应该是套用一个布局框架，在框架内再通过栅格划分区域，每个栅格内的元素再通过来水平/竖直排列。 2.参数传递 通过前端和合约进行交互，需要先初始化一个合约。在主窗口进行初始化就行了，在渲染子组件的时候，将合约作为属性传递到组件当中，就可以直接调用合约了。通过小狐狸钱包进行链接后，也可以将账户作为属性传递到各个组件中去。 当需要从合约中获取一些数据作为属性传递给子组件的时候，需要用到异步函数来获取。这个时候，由于异步函数的特殊性，结果并不会马上返回，而是先渲染了子组件，然后才能接受到返回的数据。就是说，子组件初始化的时候，从主界面传过来的数据是空值。这个时候就需要注意一下了，当数据为空的时候，有些地方就会报错他，最好加上try{}。当异步函数的数据返回了以后，会重新渲染下子组件。 另外一个需要注意的细节，是子组件在接受属性的时候，要加上{}，如果不加{}，而传递多个属性的话，不会编译报错，但是运行的时候就会出现莫名其妙的报错了。 export default function Login({contract, accounts, setAccounts}) 3.页面自动刷新 对于页面中的表格或者列表，当其dataSource发生了改变，在页面上显示的内容并不会主动进行更新。我们需要通过useState的方式来触发组件的重新渲染。而对于表格或者列表的dataSource，一般是一个数组类型。当我们通过setState修改了其中某一个值的时候，由于其引用没有改变，只是改变了引用指向的内存数据，React认为虚拟DOM并没有改变，因此，不会重新渲染组件。这就会导致表格或列表组件的dataSource改变了，但是组件并没有重新渲染。解决的方法是给表格/列表的每一行赋予一个任意的属性，属性为一个布尔值，每次修改dataSource的时候，就将这个属性的布尔值取反，这样组件就会重新渲染了。 <List.Item id={id} ...//每一个item绑定一个属性 每次onClick的时候，修改属性： let _id=!id; setId(_id); 4.合约函数返回数据 有时候需要与合约交互，以获取数据。合约的函数通常有两种，一种是view函数，一种是非view函数。对于view函数，只需要通过contract.function（）调用合约函数就可以获得函数返回的值。注意合约函数是异步的，需要通过异步的形式来调用。对于非view函数，需要通过链上进行交互。此时，通过contract.function（）调用合约，await返回的值是一个链上交易，里面包含了tx、gas fee等参数。即便这个函数写了return，也无法通过ethers.js来获取到。这种情况下，需要在合约中让这个非view函数在被调用的时候触发一个事件event，当这个交易被链上确认了以后，这个函数绑定的event就可以在链下被查询到。进而event中包含的一些数据也就可以获取到了。 Example Code: const tx = await contract.view_comment(shopid,comment_index); const receipt = await tx.wait(); let _myarray = myArray; _myarray[comment_index].comment = receipt.events[1].args[1];