ব্রাউজার উইন্ডোটির আকার পরিবর্তন করা হলে আমি কীভাবে পুনরায় রেন্ডার করতে প্রতিক্রিয়া জানাতে পারি?
পটভূমি
আমার কিছু ব্লক রয়েছে যা আমি পৃষ্ঠায় স্বতন্ত্রভাবে বিন্যাস করতে চাই, তবে আমি যখন ব্রাউজার উইন্ডো পরিবর্তন হয় তখন সেগুলি আপডেট করতে চাই। একেবারে শেষ ফলাফলটি বেন হল্যান্ডের মতো কিছু হবে পিনটারেস্ট লেআউটের তবে প্রতিক্রিয়া ব্যবহার করে কেবল jQuery নয় written আমি এখনও একটি পথ বন্ধ।
কোড
এখানে আমার অ্যাপ্লিকেশন:
var MyApp = React.createClass({
//does the http get from the server
loadBlocksFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
mimeType: 'textPlain',
success: function(data) {
this.setState({data: data.events});
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
this.loadBlocksFromServer();
},
render: function() {
return (
<div>
<Blocks data={this.state.data}/>
</div>
);
}
});
React.renderComponent(
<MyApp url="url_here"/>,
document.getElementById('view')
)তারপরে আমার কাছে Blockউপাদানটি রয়েছে ( Pinউপরের Pinterest উদাহরণের সাথে সমান ):
var Block = React.createClass({
render: function() {
return (
<div class="dp-block" style={{left: this.props.top, top: this.props.left}}>
<h2>{this.props.title}</h2>
<p>{this.props.children}</p>
</div>
);
}
});এবং তালিকা / সংগ্রহ Blocks:
var Blocks = React.createClass({
render: function() {
//I've temporarily got code that assigns a random position
//See inside the function below...
var blockNodes = this.props.data.map(function (block) {
//temporary random position
var topOffset = Math.random() * $(window).width() + 'px';
var leftOffset = Math.random() * $(window).height() + 'px';
return <Block order={block.id} title={block.summary} left={leftOffset} top={topOffset}>{block.description}</Block>;
});
return (
<div>{blockNodes}</div>
);
}
});প্রশ্ন
আমার কি jQuery এর উইন্ডোর আকার পরিবর্তন করা উচিত? যদি তাই হয় তবে কোথায়?
$( window ).resize(function() {
// re-render the component
});এটি করার আরও একটি "প্রতিক্রিয়া" উপায় আছে?
this.updateDimensionsপাশ থেকেaddEventListenerশুধু একটি খালি ফাংশন রেফারেন্স, যার জন্য কোনো মূল্য থাকবেthisযখন বলা হয়। কোনও বেনামি ফাংশন, বা একটি .bind () কলটি যুক্ত করতে ব্যবহার করা উচিতthis, বা আমি ভুল বুঝেছি?