【Sui】前端共学React学习笔记（2）

请关注 sui 前端共学营及其社区，在这里你可以学到前端和 move 合约语言的知识。

组件通信

react组件分两种DOM组件和react组件。

1.DOM组件Props

DOM组件是react支持的所有HTML和SVG标签。比如我们写一个img标签给其设置一些属性比如src和alt，这些属性并非纯HTML写法会有些变化，这些像HTML属性的功能在react称为Props。可以结合jsx来进行地址属性设置。我也可以给其做类名设置为与js的class关键字不冲突要更改为另一个名字为className

<img 
    src={logo}
    alt=""
    className="logo"
/>

关于style样式的写法 在jsx中style是种键值结构所有它允许使用键值对的方式进行style设置：

<img 
    src={logo}
    alt=""
    className="logo"
    style={{
        width: "100px",
        heigth: "100px",
        backgeoundColor: "grey"
    }}
/>

也可以直接书写一个变量再通过插槽形式设置style:

const imgStyle = {
        width: "100px",
        heigth: "100px",
        backgeoundColor: "grey"
    }

<img 
    src={logo}
    alt=""
    className="logo"
    style={imgStyke}
/>

jsx还支持展开语法，可以将我们所有属性提前预制一个对象（alt属性无法单独提取出来，jsx规范要求img没有设置alt会提示警告）：

const imgData = {
     className: "logo",
     style: {
         width: "100px",
         heigth: "100px",
         backgeoundColor: "grey"
     }
}

<img
    src={logo}
    alt=""
    {...imgData}
/>

2.React组件Props

父组件像子组件进行传值。设置一个组件Article可以接受传值后渲染内容我们通过解构title, content}获取父组件的值。如果有一个需要判断是否存在的值active来决定展示内容可以再接个active，下列代码第一个有active便会显示状态：显示中，而另一个没有active便是其他情况了。

function Article({title, content, active}) {
  return (
    <>
      <h1>{title}</h1>
      <p>{content}</p>
      <p>状态：{active ? "显示中": "已隐藏"}</p>
    </>
  );
}

function App() {
  return (
    <>
      <Article
        title="标题1"
        content="内容1"
        active
      />
      <Article
        title="标题2"
        content="内容2"
      />
    </>
  );
}

接下来对内容区进行一个单独的封装，这时像content，active在detail不需要再article使用，将Article中content，active去除单独包一层放入detail中，可以通过解构方式写个articleData给Article组件传给Detail。

function Detail (content, active) {
    return (
        <>
            <p>{content}</p>
            <p>状态：{active ? "显示中": "已隐藏"}</p>
        </>
    )
}

function Article({title, articleData}) {
  return (
    <>
      <h1>{title}</h1>
      <Detail {...articleData}/>
    </>
  );
}

function App() {
  const articleData = {
      title: "标题1",
      detailData: {
          content: "内容1",
          active: true
      }
  }

  return (
    <>
      <Articleru
        {...articleData}
      />
    </>
  );
}

3.将jsx做为Props传递

若我们在使用List时内部可以有些自定义结构，我们可以使用children

funcion List ({children}) {
    return (
        <ul>
            {children}
        </ul>
    )
}

function App() {
    return (
        <>
            <List>
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
            </List>
        </>
    )
}

现在在List中不单单只有li可能有其他的如title和footer，可能有些没用底部footer的话我们就需要一个默认值。

funcion List ({children, title, footer = <div>默认底部</div>}) {
    return (
       <>
           <h2>{title}</h2>
           <ul>
               {children}
           </ul>
           {footer}
       </>
    )
}

function App() {
    return (
        <>
            <List
                title="列表1"
                footer={<p>这是底部内容1</p>}
            >
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
            </List>
            <List
                title="列表"
            >
                <li>内容</li>
                <li>内容</li>
                <li>内容</li>
            </List>
        </>
    )
}