当状态改变时,React 触发 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
显示基于状态的内容方法。
最佳答案
React 不会呈现虚假值,无论是组件还是属性(如 Preview
情况),例如
<div>{null}</div>
<img src={null} />
呈现给
<div></div>
<img/>
因此,通常您只需创建一个变量并有条件地为其分配一个组件或空值,正如另一个答案中所建议的那样:
var button = null;
if(myConditionForShowingButton) {
button = <SubmitButton />;
}
-- 或者简单地说--
var button = myConditionForShowingButton ?
<SubmitButton /> :
null;
在组件变大的情况下,通常有一个用于渲染该部分的子例程更具可读性和更清晰
var complexComponent = condition ?
this.renderComplexComponent() :
null
关于javascript - 在 React 中渲染另一个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27699250/