益阳住房和城乡建设局网站,网站制作风格,专业做网站排名,wordpress dx1. 你知道如何使用“”吗?
在React程序中,我经常使用“”运算符来决定是否显示内容,如下所示:
我的组长: “你不知道运算符的特性吗?当请求还没有成功返回时,会直接渲染“0”。”
我并不信服, 因为我一直都是这样编写代码,从未出过错。为了…1. 你知道如何使用“”吗?
在React程序中,我经常使用“”运算符来决定是否显示内容,如下所示:
我的组长: “你不知道运算符的特性吗?当请求还没有成功返回时,会直接渲染“0”。”
我并不信服, 因为我一直都是这样编写代码,从未出过错。为了证明老板错了,我写了下面的示例
我的天!组长是对的,页面开始是显示0,3秒后才显示列表。 为什么?
提示(来自 MDN):“逻辑与()运算符(逻辑连词)对一组布尔操作数将只有当所有操作数都为真时才为真。否则,它将为假。”
更一般地说,该运算符返回从左到右评估时遇到的第一个假值操作数的值,或者如果它们都是真值,则返回最后一个操作数的值。
几个例子
const x1 0
const x2 fatfish
const x3 1
const x4 medium
console.log(x1 x2) // 0
console.log(x3 x4) // medium现在我终于理解为什么那样编写代码会导致错误了。原因如下:
list.length List list{ list } /
0 List list{ list } / // 0如何解决?
我找到了三种解决这个问题的方法。希望你不要犯我的错误。祝你好运。
// 1. Convert list.length to boolean
!!list.length List list{ list }/// 2. Use ternary expressions and null
list.length ? List list{ list }/ : null// 3. Controlled by specific logic
list.length 1 List list{ list }/2. “props.children”的奇怪行为
我猜你写过类似的代码。 当向Container /组件传递内容时,“children” 将显示。如果没有,将显示一个空工具提示。 如下所示:
const Container ({ children }) {if (children) {return (div classNamechildren-containerpThe content of children is:/p{ children }/div) } else {return (div classNameemptyempty/div)}
}我的老板:“你必须谨慎使用“children”属性,它会导致逻辑异常!像下面这种情况。”
1. 空列表数据
你认为这个例子会显示什么——“空”?
不幸的是,答案是另一个。 朋友们,我们必须非常小心地使用 props.children。 否则,老板可能会扣掉你的工资。
const Container ({ children }) {if (children) {return (div classNamechildren-containerpThe content of children is:/p{ children }/div) } else {return (div classNameemptyempty/div)}
}
const App () {const [ list, setList ] React.useState([])return (Container{list.map((name) {return div classNamename-item{ name }/div })}/Container)
}
ReactDOM.render(App /, document.getElementById(app))为什么?
让我们在“Container”组件中添加一行代码,并尝试打印children是什么!
const Container ({ children }) {console.log(children, children)// ...
}是的,你猜对了。 此时,“children”是一个空数组,所以显示“children的内容是:”而不是“空” 如何解决?
使用 React.Children.toArray 来解决这个问题将非常容易,然后你会看到显示“空”。 所以,如果你真的需要将子代用作条件判断,我建议你使用这种方法!
const Container ({ children }) {// if (children) {// Pay attention hereif (React.Children.toArray(children).length) { return (div classNamechildren-containerpThe content of children is:/p{ children }/div) } else {return (div classNameemptyempty/div)}
}3. 关于挂载和更新的问题
在React中通过状态切换组件是很常见的,但这个小东西也会让你困惑。
在下面的代码中,当你切换 name 的值时,你认为一个 Demo 组件将被卸载并且另一个将被挂载吗?
lass Demo extends React.Component {componentDidMount() {console.log(componentDidMount, this.props.name);}componentDidUpdate() {console.log(componentDidUpdate, this.props.name);}render () {return (div{ this.props.name }/div)}
}
const App () {const [ name, setName ] React.useState(fatfish)const onClick () {setName(name fatfish ? medium : fatfish)}return (div classNameapp{name fatfish ? Demo name{ name } / : Demo name{ name } /}button onClick{ onClick }click/button/div)
}
ReactDOM.render(App /, document.getElementById(app))我录制了一个短gif来给你真相,你也可以通过 CodePen 尝试它。 为什么?
尽管我们写了两个 Demo 组件并且假设它们会分别挂载和更新,但 React 认为它们是相同的组件,所以 componentDidMount 只会执行一次。
如何解决?
但是当我们想写两个相同的组件但传递不同的参数时,我们该怎么做呢?
是的,你应该给这两个组件添加不同的 ‘keys’,这样 React 会认为它们是不同的组件。componentDidMount 也会各自执行。
让我们试试
//...
// Pay attention here
name fatfish ? Demo key1 name{ name } / : Demo key2 name{ name } /
//...最后
感谢阅读。 期待你的关注和高质量文章。
