{"content":{"title":"【Sui】前端共学React学习笔记（2）","body":"![88f9d4b7250a724489ed6e23ff6ea7f.jpg](https://img.learnblockchain.cn/attachments/2025/01/zDGMnQL26788ea1ea25b3.jpg)\r\n请关注 **sui** 前端共学营及其社区，在这里你可以学到前端和 **move** 合约语言的知识。\r\n## 组件通信\r\nreact组件分两种DOM组件和react组件。\r\n### 1.DOM组件Props \r\nDOM组件是react支持的所有HTML和SVG标签。比如我们写一个img标签给其设置一些属性比如src和alt，这些属性并非纯HTML写法会有些变化，这些像HTML属性的功能在react称为Props。可以结合jsx来进行地址属性设置。我也可以给其做类名设置为与js的class关键字不冲突要更改为另一个名字为className\r\n```js\r\n<img \r\n    src={logo}\r\n    alt=\"\"\r\n    className=\"logo\"\r\n/>\r\n```\r\n关于style样式的写法\r\n在jsx中style是种键值结构所有它允许使用键值对的方式进行style设置：\r\n```js\r\n<img \r\n    src={logo}\r\n    alt=\"\"\r\n    className=\"logo\"\r\n    style={{\r\n        width: \"100px\",\r\n        heigth: \"100px\",\r\n        backgeoundColor: \"grey\"\r\n    }}\r\n/>\r\n```\r\n也可以直接书写一个变量再通过插槽形式设置style:\r\n```js\r\nconst imgStyle = {\r\n        width: \"100px\",\r\n        heigth: \"100px\",\r\n        backgeoundColor: \"grey\"\r\n    }\r\n\r\n<img \r\n    src={logo}\r\n    alt=\"\"\r\n    className=\"logo\"\r\n    style={imgStyke}\r\n/>\r\n```\r\njsx还支持展开语法，可以将我们所有属性提前预制一个对象（alt属性无法单独提取出来，jsx规范要求img没有设置alt会提示警告）：\r\n```js\r\nconst imgData = {\r\n     className: \"logo\",\r\n     style: {\r\n         width: \"100px\",\r\n         heigth: \"100px\",\r\n         backgeoundColor: \"grey\"\r\n     }\r\n}\r\n\r\n<img\r\n    src={logo}\r\n    alt=\"\"\r\n    {...imgData}\r\n/>\r\n```\r\n### 2.React组件Props\r\n父组件像子组件进行传值。设置一个组件Article可以接受传值后渲染内容我们通过解构title, content}获取父组件的值。如果有一个需要判断是否存在的值active来决定展示内容可以再接个active，下列代码第一个有active便会显示状态：显示中，而另一个没有active便是其他情况了。\r\n```js\r\nfunction Article({title, content, active}) {\r\n  return (\r\n    <>\r\n      <h1>{title}</h1>\r\n      <p>{content}</p>\r\n      <p>状态：{active ? \"显示中\": \"已隐藏\"}</p>\r\n    </>\r\n  );\r\n}\r\n\r\nfunction App() {\r\n  return (\r\n    <>\r\n      <Article\r\n        title=\"标题1\"\r\n        content=\"内容1\"\r\n        active\r\n      />\r\n      <Article\r\n        title=\"标题2\"\r\n        content=\"内容2\"\r\n      />\r\n    </>\r\n  );\r\n}\r\n```\r\n接下来对内容区进行一个单独的封装，这时像content，active在detail不需要再article使用，将Article中content，active去除单独包一层放入detail中，可以通过解构方式写个articleData给Article组件传给Detail。\r\n```js\r\nfunction Detail (content, active) {\r\n    return (\r\n        <>\r\n            <p>{content}</p>\r\n            <p>状态：{active ? \"显示中\": \"已隐藏\"}</p>\r\n        </>\r\n    )\r\n}\r\n\r\nfunction Article({title, articleData}) {\r\n  return (\r\n    <>\r\n      <h1>{title}</h1>\r\n      <Detail {...articleData}/>\r\n    </>\r\n  );\r\n}\r\n\r\nfunction App() {\r\n  const articleData = {\r\n      title: \"标题1\",\r\n      detailData: {\r\n          content: \"内容1\",\r\n          active: true\r\n      }\r\n  }\r\n  \r\n  return (\r\n    <>\r\n      <Articleru\r\n        {...articleData}\r\n      />\r\n    </>\r\n  );\r\n}\r\n```\r\n### 3.将jsx做为Props传递\r\n若我们在使用List时内部可以有些自定义结构，我们可以使用children\r\n```js\r\nfuncion List ({children}) {\r\n    return (\r\n        <ul>\r\n            {children}\r\n        </ul>\r\n    )\r\n}\r\n\r\nfunction App() {\r\n    return (\r\n        <>\r\n            <List>\r\n                <li>内容</li>\r\n                <li>内容</li>\r\n                <li>内容</li>\r\n            </List>\r\n        </>\r\n    )\r\n}\r\n```\r\n现在在List中不单单只有li可能有其他的如title和footer，可能有些没用底部footer的话我们就需要一个默认值。\r\n```js\r\nfuncion List ({children, title, footer = <div>默认底部</div>}) {\r\n    return (\r\n       <>\r\n           <h2>{title}</h2>\r\n           <ul>\r\n               {children}\r\n           </ul>\r\n           {footer}\r\n       </>\r\n    )\r\n}\r\n\r\nfunction App() {\r\n    return (\r\n        <>\r\n            <List\r\n                title=\"列表1\"\r\n                footer={<p>这是底部内容1</p>}\r\n            >\r\n                <li>内容</li>\r\n                <li>内容</li>\r\n                <li>内容</li>\r\n            </List>\r\n            <List\r\n                title=\"列表\"\r\n            >\r\n                <li>内容</li>\r\n                <li>内容</li>\r\n                <li>内容</li>\r\n            </List>\r\n        </>\r\n    )\r\n}\r\n```"},"author":{"user":"https://learnblockchain.cn/people/23988","address":null},"history":null,"timestamp":1737128867,"version":1}