React教程（四）：React组件进阶

传送门：
React教程（一）：React基础
React教程（二）：React组件基础
React教程（三）：React组件通信

一.Children属性

1.children属性是什么？

表示该组件的子节点，只要组件内部有子节点，props中就有该熟悉感。

2.children可以是什么？

普通文本
普通标签元素
函数
JSX

举个例子：


// 子组件A
const SonA = (props) => {
  return <div>组件A:{props.children}</div>;
};
// 子组件B
const SonB = (props) => {
  return <div>组件B：{props.children}</div>;
};

// 子组件C
const SonC = (props) => {
  return <div>组件C：{props.children}</div>;
};

// 子组件C
const SonD = (props) => {
  console.log("dddd", props.children);
  return <div>组件D：{props.children}</div>;
};
// 根组件
class App extends React.Component {
  state = {
    msg: "11111好耶111",
  };
  renderUI = () => {
    return <span>111</span>;
  };
  render() {
    return (
      <div>
        {/* 普通文本 */}
        <SonA>aaaaa</SonA>
        {/* 标签 */}
        <SonB>
          <span>bbbb</span>
        </SonB>
        {/* jsx元素 */}
        <SonC>{true && <span>ccccc</span>}</SonC>
        {/* 函数 */}
        <SonD>{this.renderUI()}</SonD>
      </div>
    );
  }
}

显示结果：
在这里插入图片描述
这里要注意的是，如果直接在jsx中使用匿名函数，他将不会解析为jsx元素，会被当成一个函数。
比如下面这种写法：

        <SonD>
          {() => {
            return <span>111</span>;
          }}
        </SonD>

导致的报错如下：
大致就是函数无法作为react组件的子节点
在这里插入图片描述
这个时候，我们传递过去的是函数，那么我们需要调用这个函数：
子组件D中需要去调用它,后面加一个括号就行：

// 子组件C
const SonD = (props) => {
  console.log("dddd", props.children);
  return <div>组件D：{props.children()}</div>;
};

我们使用children一般用来做高阶组件，诸如fusion组件库中的navbar就是使用了chidren属性。

二.props校验-场景和使用

使用场景：

对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就可能导致内部错误。且组件使用者无法知道报错原因。

举个栗子：

// 随便声明一个函数组件
const ShowPersonList = (props) => {
  const { personList, id, kind } = props;
  return (
    <div>
      {personList.map((item) => {
        return (
          <div>
            {item.name}
            {id}----{kind}
          </div>
        );
      })}
    </div>
  );
};

我们知道personList表示的是一个数组，我们在渲染jsx时使用了数组的方法map。
但是组件的使用者并不知道我们组件内部使用了这个api呀（黑盒）。
所以使用者在使用时如果传入一个非数组例如1

// 根组件
function App() {
  return (
    <div>
      <ShowPersonList personList={1} id={"22"} kind={122} />
    </div>
  );
}

那么就会导致控制台报错
在这里插入图片描述
类型错误，personList.map不是一个方法。因为我们传的是数字number，number当然没有map方法。
而使用者就会很蒙蔽，这是哪里的报错，我哪里用了map这种疑问。

当然有的人可能会说啦，啊，我的组件是TS写的，有TS声明，当然，现在开发都是基于TS的，组件可以规定使用者必须传入什么类型的数据甚至什么字段，极大减少了因为传入错误的数据而导致的错误的发生。（还能提示报错原因）
在这里插入图片描述

但！！！！

我知道你很急，你先别急，这里是React教程！！
在这里插入图片描述

我们假设只使用js的情况下怎么解决这个问题。

面对这样的问题，我们可以使用props校验。
做法就是使用第三方的校验包（当然你也可以自己写，不过现成的不香吗）

实现步骤：

安装属性校验包:
npm add prop-types
导入prop-types包
使用组件名.propTypes={}给组件添加校验规则。

在这里插入图片描述

好，我装好了，记得command/ctrl +shift + p 再enter重启下vscode窗口。

代码演示实战：