本文介绍了React中处理props.children对象的正确方式，避免在父组件内部使用props.children.map引发的错误。此外，解释了React事件处理的机制，包括SyntheticEvent的使用和事件委托。还讨论了setState方法的回调函数用途、React中事件处理的逻辑以及React组件开发中的作用域问题。同时，文章提到了React与其他框架如Vue的相似性和差异，以及在Redux中使用Action和Reducer的注意事项。
有课前端网
在父组件内部，如果尝试使用 props.children. map映射子对象，则会抛出错误，因为props. children是一个对象，而不是一个数组。
如果有多个子元素， React会使 props.children成为一个数组，如下所示。
有课前端网
前端技术学习平台
不建议使用如下方式，在这个案例中会抛出错误。
class Parent extends Component {
render ( ) {
return (
)
}
}
建议使用如下方式，避免在上一个案例中抛出错误。
class Parent extends Component {
render ( ) {
return (
)
}
}
12、描述事件在 React中的处理方式。
为了解决跨浏览器兼容性问题， React中的事件处理程序将传递 SyntheticEvent的实例，它是跨浏览器事件的包装器。这些 SyntheticEvent与你习惯的原生事件具有相同的接口，它们在所有浏览器中都兼容。
React实际上并没有将事件附加到子节点本身。而是通过事件委托模式，使用单个事件监听器监听顶层的所有事件。这对于性能是有好处的。这也意味着在更新DOM时， React不需要担心跟踪事件监听器。
13、createElement和 cloneElement有什么区别？
createElement是JSX被转载得到的，在 React中用来创建 React元素（即虚拟DOM）的内容。cloneElement用于复制元素并传递新的 props。
14、setState方法的第二个参数有什么用？使用它的目的是什么？
它是一个回调函数，当 setState方法执行结束并重新渲染该组件时调用它。在工作中，更好的方式是使用 React组件生命周期之——“存在期”的生命周期方法，而不是依赖这个回调函数。
export class App extends Component {
constructor （props） {
super ( props )
this.state = {
username：“雨夜清荷”
}
}
render ( ) {
return (
);
}
componentDidMount ( ) {
this .setstate ( {
username ：‘有课前端网’
}，( ) => console. log ( 're-rendered success. ’ ) )
15、这段代码有什么问题？
class App extends Component {
constructor ( props ) {
super ( props )
this .state = {
username：“有课前端网”，
msg：’ ’
}
}
render ( ) {
return (
);
}
componentDidMount ( ) {
this .setState ( ( oldState, props ) => {
retur
最低0.47元/天 解锁文章
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
