다음과 같이 구성 요소에서 동적으로 데이터를 설정해야합니다.
var dynamicData = 0;
setInterval(()=>{
dynamicData = (Math.random() * 100).toFixed(0); // ???
}, 3000);
var Hello = React.createClass({
render: function() {
return <h2>{this.props.test}</h2>;
}
});
ReactDOM.render(
<Hello test={dynamicData} />,
document.getElementById('container')
);props 'test'는 동적이 아닙니다. setTimeout 값을 구성 요소로 변경 한 후 변경되지 않았습니다. 이를 수행하는 다른 가장 좋은 방법이 있습니까? 구성 요소 외부에서 변경된 구성 요소에 동적으로 데이터를 추가하는 방법은 무엇입니까?
전역 이벤트 이미 터를 사용하고으로 전달할 수 props있으며 구성 요소는 변경 사항을 수신하고 상태를 업데이트합니다.
const dynamicData = new EventEmitter();
setInterval(()=>{
let newValue = (Math.random() * 100).toFixed(0);
dynamicData.emit('change', newValue)
}, 3000);
var Hello = React.createClass({
getInitialState: () => ({test: 0}),
handleChange: function(newValue) {
this.setState({test: newValue})
},
componentDidMount: function() {
this.props.test.on('change', this.handleChange)
},
componentWillUnmount: function() {
this.props.test.removeListener('change', this.handleChange)
},
render: function() {
return <h2>{this.state.test}</h2>;
}
});
ReactDOM.render(
<Hello test={dynamicData} />,
document.getElementById('container')
);<script src="https://npmcdn.com/[email protected]/EventEmitter.min.js"></script>
<div id="container">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다