渲染內的其他組件的陣營

當狀態改變時，作出反應的觸發componentDidUpdate()方法，到那時我做的：渲染內的其他組件的陣營

componentDidUpdate: function() { 
    React.render(new SubmitButton, $('.uploader-submit').get(0)); 
}

正如你所看到的，我渲染SubmitButton當一個特定的狀態改變，但我的問題是：這是完成此功能的最佳行爲嗎？

我的方案是：我正在上傳照片。當input[type=file]更改時，我創建一個新的狀態屬性，然後觸發componentDidUpdate()，調用SubmitButton。

這是我render()方法：

render: function() { 
    return (
    <div className="uploader"> 
     <header className="uploader-header"> 
     <div className="uploader-actions pull-left"> 
      <div className="uploader-submit"></div> 
      <CancelButton router={this.props.router} /> 
     </div> 

     <UploadButton callback={this.imageSelectedCallback} /> 
     </header> 

     <Preview imageUri={this.state.imageUri} /> 
    </div> 
) 
}

我不能做類似的<Preview />成分？我的意思是，它在那裏，但是當this.state.imageUri與null不同時，就出現了一些情況。這是Preview實現：

var Preview = { 
    render: function() { 
    return (
     <img src={this.props.imageUri} /> 
    ) 
    } 
}; 

module.exports = React.createClass(Preview);

是的，我知道 - 「預覽」在默認情況下不可見的，因爲它是一個形象，但我想知道是否有達到我想要的另一種方法：顯示基於狀態的東西，使用render方法。

來源

2014-12-30 Guilherme Oderdenge

陣營不呈現falsy值，無論是部件或屬性（如在Preview情況下），例如

<div>{null}</div> 
<img src={null} />

呈現到

<div></div> 
<img/>

所以通常你只需要創建一個變量，並有條件地分配給它一個組件或null作爲在另一個答案還建議：

var button = null; 
if(myConditionForShowingButton) { 
    button = <SubmitButton />; 
}

- 或者乾脆 -

var button = myConditionForShowingButton ? 
    <SubmitButton /> : 
    null;

在組件變大的情況下，它通常具有更可讀性和更清潔，以便具有渲染該部件的子程序

var complexComponent = condition ? 
    this.renderComplexComponent() : 
    null

來源

2014-12-30 12:49:48 kraf

太棒了！我認爲這不是一件好事，因爲我們有像componentDidUpdate（）這樣的方法等。但它是一個平滑而簡單的解決方案，它像一個魅力一樣工作！謝謝你和@reecer。 :-) –

是的。 If-Else in JSX.

render: function() { 
    var submitButton; 
    if (this.state.imageSelected) 
    submitButton = <SubmitButton />; 

    return (
    <div className="uploader"> 
     <header className="uploader-header"> 
     <div className="uploader-actions pull-left"> 
      <div className="uploader-submit">{ submitButton }</div> 
      <CancelButton router={this.props.router} /> 
     </div> 

     <UploadButton callback={this.imageSelectedCallback} /> 
     </header> 

     <Preview imageUri={this.state.imageUri} /> 
    </div> 
) 
}

來源

2014-12-30 05:42:03 reecer

渲染內的其他組件的陣營

回答

相關問題