react添加表格时候 tr中必须是td
但是react.component中return必须返回一个主标签
1.使用Fragment 给子元素分组 ,不需要像子元素 添加额外的DOM节点
<React.Fragment>
<td>hello</td>
<td>world</td>
</React.Fragment>
2.使用短语法 注:短语发不支持key
<>
<td>hello</td>
<td>world</td>
</>
二、error问题
其他组件:throw new Error('count error') //创建错误,创造一个错误类型抛出
class ErrorBoudary extends React.Component{
// 01 错误容器
state = {error:null,errorInfo:null}
// 02 钩子函数 : 子组件发生错误异常 会被错误边界捕获 = 执行componentDidCatch 并传入错误信息
componentDidCatch(error,errorInfo){
console.log('componentDidCatch');
// 03 同步
this.setState({
error,
errorInfo
})
// 记录日志
console.log(error);
console.log(errorInfo);
}
render(){
const {error,errorInfo} = this.state
// 04 页面渲染
// 有错误
if(error || errorInfo){
return (
<div>
<h2>Something go Wrong</h2>
<details style={{whiteSpace:'pre-wrap'}}>
{error && error.toString()}
<br/>
{errorInfo &&errorInfo.componentStack }
</details>
</div>
)
}
// 没错误
return this.props.children
}
}
执行思路:子组件发生错误异常 会被错误边界捕获 = 执行componentDidCatch 并传入错误信息
![](https://i-blog.csdnimg.cn/blog_migrate/dcf326cacfac55e8030e20a58ffc9e65.png)
高阶组件
// A higher-order component (HOC) 高阶组件 一种模式 / 高级技术
// 作用 : 对现有的组件的增强
// 场景 :
// 代码复用 : 将多个组件的公共代码抽离出来
// 使用三方组件 : 保护三方组件 =>原有组件 不受侵害
// 参数 首字母大写 : 组件; 返回值 也应该是一个组件
let HOC = (Component) => {
return class _ extends React.Component {
// 增强 : 封装公共逻辑
common = () => {
return "commmon function logic";
};
render() {
// 将增强内容 通过props 注入到每个组件里面
return <Component common={this.common} />;
}
};
};
class A extends React.Component {
render() {
return (
<div>
<h1>A component</h1>
{this.props.common()}
</div>
);
}
}
class B extends React.Component {
render() {
return (
<div>
<h1>B component</h1>
{this.props.common()}
</div>
);
}
}
let HocA = HOC(A)
let HocB = HOC(B)
class App extends React.Component {
render() {
return (
<div>
<h1>App component</h1>
<HocA></HocA>
<HocB></HocB>
</div>
);
}
}