我有一个父/子组件层次结构,父项是TestResultChooser,而子项是TestResult,如下所示:
var TestResultChooser = React.createFactory(React.createClass({
displayName: 'test-result-chooser',
statics: {
customMethod: function (foo) {
return foo === 'bar';
}
},
getInitialState: function getInitialState() {
return {overallTestResults: null};
},
changeOverallTestResult: function changeOverallTestResult(value) {
this.setState({overallTestResults: value});
},
render: function render() {
var self = this;
var tests = this.props.items.map(function (testPath) {
return React.createElement(TestResult, {
key: testPath,
testName: testPath,
name: testPath,
testResult: null
});
});
return React.createElement('div', null, React.createElement('h1', null, 'Test Results:'),
React.createElement('div', {id: 'tests'}, tests, React.createElement('p', {id: 'total'}, ' ',
React.createElement('b', null, 'Test Results:', this.state.overallTestResults))))
}
}));
var TestResult = React.createFactory(React.createClass({
displayName: 'test-result',
getInitialState: function getInitialState() {
return {};
},
componentDidMount: function(){
var self = this;
var testPath = this.props.testName;
console.log('component did mount'); // this is indeed logged!
$.get(testPath).done(function (msg) {
var myWorker = new Worker('/js/workers/one.js');
myWorker.postMessage(msg);
myWorker.onmessage = function (msg) {
console.log('make new state:',msg);
self.setState(msg.data);
};
}).fail(function (err) {
console.error(err);
});
},
clickHandler: function clickHandler() {
console.log('clicked!'); // this is indeed logged!
this.setState({testName: 'foo-bar'}); //this should now change what is displayed...
},
render: function render() {
var self = this;
return React.createElement('p', {
className: this.state.active ? 'active' : '',
onClick: this.clickHandler,
},
this.props.testName, ' ', React.createElement('b', null, 'Pass/fail')
);
}
}));
ReactDOM.render(React.createElement(TestResultChooser, {items: stf}), document.getElementById('react-app'));
因此,当我单击每个子项时,单击已注册,但testName不会更改,那么为什么不调用setState会更改我的小应用程序中显示的值?