Question

我正在评估一些变量，并使用结果有条件地呈现元素。

这是评估

const condition = this.props.badgeCount > 0

并使用这样的结果

<View>
  {condition && (
    <View>
      <Text>
        {this.props.badgeCount}
      </Text>
    </View>
  )}
</View>

并且RN失败并显示错误

文本字符串必须在文本组件中呈现

当我将condition更改为

时效果很好

const condition = Boolean(this.props.badgeCount > 0)

因此，很明显，返回的结果类似"true"或"false"。

我的问题是为什么会这样，因为显然这是一个应该返回布尔值的求值，并且除了我使用的方法之外，还有没有其他方法可以解决此问题？

Answer 1

那是因为您正在执行的是inline if语句。任何不是空字符串，self.node.removeFromParentNode() node.eulerAngles.z = 0 //node.scale = SCNVector3(1.0, 1.0, 1.0) self.viewAR.backgroundColor = UIColor.clear self.imageView.contentMode = .scaleAspectFit self.viewAR.frame = CGRect(x: 0.0, y: 0.0, width: 250, height: 250) self.imageView.frame = self.viewAR.frame self.node.geometry = SCNPlane(width: 0.05, height: 0.05) if selectedIndexPath.row < 0 { self.imageView.layer.borderColor = UIColor.clear.cgColor } else { self.imageView.layer.borderColor = colors[selectedIndexPath.row].cgColor } self.imageView.layer.borderWidth = 10.0 self.viewAR.addSubview(self.imageView) if let resWidth = self.newWork?.getSetArtWidth, let resHeight = self.newWork?.getSetArtHeight { if resWidth > 0.0 && resHeight > 0.0 { self.viewAR.addSubview(self.lblDimension) self.lblDimension.backgroundColor = colors[selectedIndexPath.row] self.lblDimension.textColor = UIColor.white self.lblDimension.text = "Size = \(resWidth) mm * \(resHeight) mm" } } if aRImageList.count != 0 { if let imgUrl = aRImageList[imageIndex] as? String { if let resUrl = URL(string: imgUrl){ self.imageView.sd_setImage(with: resUrl, placeholderImage: LISTING_PLACEHOLDER , completed: { (image, error, disk, imageURL) in if error == nil { self.imageView.image = image if let image = image { self.setImageSize(image) } self.node.geometry?.firstMaterial?.isDoubleSided = true self.node.geometry?.firstMaterial?.diffuse.contents = self.viewAR.asImage() } }) } else { self.imageView.image = LISTING_PLACEHOLDER } } else if let resImage = aRImageList[imageIndex] as? UIImage { self.imageView.image = resImage } //self.imageView.image = aRImageList[imageIndex] } node.geometry?.firstMaterial?.diffuse.contents = viewAR.asImage()//aRImageList[imageIndex]//viewToAdd if isHorizontal == true { //let resScale = node.scale // let resAngle = node.eulerAngles.z node.position = SCNVector3(hitTestResult.worldTransform.columns.3.x, hitTestResult.worldTransform.columns.3.y, hitTestResult.worldTransform.columns.3.z) //node.scale = resScale //node.eulerAngles.z = resAngle node.pivot = SCNMatrix4Rotate(node.pivot, Float.pi, 0, 1, 0) let constraint = SCNLookAtConstraint(target:sceneView.pointOfView) constraint.isGimbalLockEnabled = true node.constraints = [constraint] } else { node.constraints = nil node.pivot = SCNMatrix4MakeTranslation(0,0,0) let resScale = node.scale //let resAngle = node.eulerAngles.z node.transform = SCNMatrix4(hitTestResult.anchor!.transform) node.eulerAngles = SCNVector3(node.eulerAngles.x + (-Float.pi / 2), node.eulerAngles.y, node.eulerAngles.z) node.position = SCNVector3(hitTestResult.worldTransform.columns.3.x, hitTestResult.worldTransform.columns.3.y, hitTestResult.worldTransform.columns.3.z + 0.07) node.scale = resScale // node.eulerAngles.z = resAngle } sceneView.scene.rootNode.addChildNode(node) planeNode.removeFromParentNode() for removeNode in self.planeNodes { removeNode.removeFromParentNode() } }或null的字符串都是真实值（https://developer.mozilla.org/en-US/docs/Glossary/Truthy）。

您可以通过进入浏览器的控制台并执行以下命令来轻松测试此问题：

undefined

您可以通过执行console.log('someString' ? true : false); console.log('' ? true : false);来解决问题，该操作会将字符串值强制转换为布尔值，从而不会触发!!condition错误：

text strings must be rendered within a text component

有关此问题的<View> {!!condition && ( <View> <Text> {this.props.badgeCount} </Text> </View> )} </View>的更多信息（不是）：https://stackoverflow.com/a/784946/3061857

为什么React Native返回与布尔值等效的字符串？

1 个答案: