Question

我正在使用SlateJS，我需要延迟<img src={imgSrc} />的返回，直到imgSrc是一个定义的值（它被从一个blob读取为DataURL）

有没有办法做到这一点？

我知道这不起作用（这是不明智的），但理论上我可以做之类的事情：

return setTimeout(function() {return <img src={imgSrc} />, 1000)

Answer 1

如果要在定义图像值后立即渲染图像，请尝试以下操作：

方法1：使用一个更高阶的函数来获取imgSrc prop，如<ImageComponent imgSrc={} />

const ImageComponent = ({ imgSrc }) => {
    if (!imgSrc) {
        return <span></span>
    } else {
        return <img src={imgSrc} />
    }
}

方法2：在运行return语句的位置呈现一些内联代码。

{ this.props.imgSrc && <img src={imgSrc} />}

上面的代码非常酷，如果定义了imgSrc prop，它的作用是渲染img元素，否则它什么都不做。它是反应性的，所以当imgSrc改变时，元素会重新呈现。

希望它有所帮助。

Answer 2

如果您知道等待的道具或值，当条件不正确时，您可以在渲染函数上简单地return null。例如。

const ImgComponent = React.createClass({
  render() {
    if (!this.props.imgSrc) {
      return null
    }
    return (
      <img src={this.props.imgSrc} />
    )
  }
})

Answer 3

你确实做了一个像：

的班轮

func createAchievements(aName: String, Des: String, Image:String, Amount:NSNumber, Needed: NSNumber, Stage: NSNumber, SearchName: String) {

    let A:Achievement = NSEntityDescription.insertNewObject(forEntityName: "Achievement", into: CoreDatabaseContoller.getContext()) as! Achievement

    A.theName = aName
    A.theDescription = Des
    A.theImage = Image
    A.aAmount = Amount
    A.aNeededAmount = Needed
    A.aStage = Stage
    A.theSearchName = SearchName

    CoreDatabaseContoller.saveContext()

}




func giveDataForAchievements() {

    if achievementsGenerated == false {

        for count in 1...27 {

            var aName = "None"
            var aDesc = "None"
            var aImage = "locked"
            var aAmount:NSNumber = 0
            var aNeededAmount:NSNumber = 1
            var aStage:NSNumber = 0
            var aSearchName = ""

            switch count {

            case 1:

                aName = "DAILY"
                aDesc = "Daily Achievement"
                aImage = "locked"
                aAmount = 0
                aNeededAmount = 1
                aStage = 3
                aSearchName = "Ach0"

            case 2:

                aName = "DAILY"
                aDesc = "Daily Achievement"
                aImage = "locked"
                aAmount = 0
                aNeededAmount = 1
                aStage = 3
                aSearchName = "Ach1"


       ... plus 30 more of these

     }

     createAchievements(aName: aName, Des: aDesc, Image: aImage, Amount: aAmount, Needed: aNeededAmount, Stage: aStage, SearchName: aSearchName)
  }

如果`imgSrc不为null，则只返回{ (imgSrc !== null) && <img src={imgSrc} /> }，否则它的行为就好像代码从不存在，其他一切都会呈现。

只有在某个条件成立后才能在React中返回？

3 个答案: