Javascript React JS-未捕获类型错误:无法读取属性';绑定&x27;未定义的
当用户单击Javascript React JS-未捕获类型错误:无法读取属性';绑定&x27;未定义的,javascript,reactjs,react-jsx,Javascript,Reactjs,React Jsx,当用户单击SingleTopicBoxcomponent并隐藏SelectedTopicPage组件时,我想显示TopicsList组件。但是,我得到了一个错误:uncaughttypeerror:无法读取topic-list.jsx文件中未定义的的属性“bind” 主控制器.jsx import {React, ReactDOM} from '../../../build/react'; import TopicsList from '../topic-list.jsx'; import S
SingleTopicBox
component并隐藏SelectedTopicPage
组件时,我想显示TopicsList
组件。但是,我得到了一个错误:uncaughttypeerror:无法读取topic-list.jsx文件中未定义的
的属性“bind”
主控制器.jsx
import {React, ReactDOM} from '../../../build/react';
import TopicsList from '../topic-list.jsx';
import SelectedTopicPage from '../selected-topic-page.jsx';
import topicPages from '../../content/json/topic-pages.js';
export default class MainController extends React.Component {
state = {
isTopicClicked: false,
topicPages
};
onClick(topicID) {
this.setState({isTopicClicked: true});
this.setState({topicsID: topicID});
};
render() {
return (
<div className="row">
{this.state.isTopicClicked
? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages}/>
: <TopicsList/>}
</div>
);
}
};
import {React, ReactDOM} from '../../build/react';
import SingleTopicBox from './single-topic-box.jsx';
import SelectedTopicPage from './selected-topic-page.jsx';
import topicPages from '../content/json/topic-pages.js';
export default class TopicsList extends React.Component {
onClick(){
this.props.onClick.bind(null, this.topicID);
},
render() {
return (
<div className="row topic-list">
<SingleTopicBox topicID="1" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="2" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="3" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="4" onClick={this.onClick} label="Topic"/>
</div>
);
}
};
import {React, ReactDOM} from '../../build/react';
export default class SingleTopicBox extends React.Component {
render() {
return (
<div>
<div className="col-sm-2">
<div className="single-topic" data-topic-id={this.props.topicID}>
{this.props.label} {this.props.topicID}
</div>
</div>
</div>
);
}
};
从'../../../build/React'导入{React,ReactDOM};
从“../topic list.jsx”导入TopicsList;
从“../SelectedTopicPage.jsx”导入SelectedTopicPage;
从“../../content/json/topic pages.js”导入主题页面;
导出默认类MainController扩展React.Component{
状态={
伊斯托弗:错,
主题页
};
onClick(topicID){
this.setState({isTopicClicked:true});
this.setState({topicsID:topicID});
};
render(){
返回(
{this.state.istopick
?
: }
);
}
};
主题列表.jsx
import {React, ReactDOM} from '../../../build/react';
import TopicsList from '../topic-list.jsx';
import SelectedTopicPage from '../selected-topic-page.jsx';
import topicPages from '../../content/json/topic-pages.js';
export default class MainController extends React.Component {
state = {
isTopicClicked: false,
topicPages
};
onClick(topicID) {
this.setState({isTopicClicked: true});
this.setState({topicsID: topicID});
};
render() {
return (
<div className="row">
{this.state.isTopicClicked
? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages}/>
: <TopicsList/>}
</div>
);
}
};
import {React, ReactDOM} from '../../build/react';
import SingleTopicBox from './single-topic-box.jsx';
import SelectedTopicPage from './selected-topic-page.jsx';
import topicPages from '../content/json/topic-pages.js';
export default class TopicsList extends React.Component {
onClick(){
this.props.onClick.bind(null, this.topicID);
},
render() {
return (
<div className="row topic-list">
<SingleTopicBox topicID="1" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="2" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="3" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="4" onClick={this.onClick} label="Topic"/>
</div>
);
}
};
import {React, ReactDOM} from '../../build/react';
export default class SingleTopicBox extends React.Component {
render() {
return (
<div>
<div className="col-sm-2">
<div className="single-topic" data-topic-id={this.props.topicID}>
{this.props.label} {this.props.topicID}
</div>
</div>
</div>
);
}
};
从'../../build/React'导入{React,ReactDOM};
从“./single topic box.jsx”导入SingleTopicBox;
从“./selected topic page.jsx”导入SelectedTopicPage;
从“../content/json/topic pages.js”导入topicPages;
导出默认类TopicsList扩展React.Component{
onClick(){
this.props.onClick.bind(null,this.topicID);
},
render(){
返回(
);
}
};
单主题框.jsx
import {React, ReactDOM} from '../../../build/react';
import TopicsList from '../topic-list.jsx';
import SelectedTopicPage from '../selected-topic-page.jsx';
import topicPages from '../../content/json/topic-pages.js';
export default class MainController extends React.Component {
state = {
isTopicClicked: false,
topicPages
};
onClick(topicID) {
this.setState({isTopicClicked: true});
this.setState({topicsID: topicID});
};
render() {
return (
<div className="row">
{this.state.isTopicClicked
? <SelectedTopicPage topicsID={this.state.topicsID} key={this.state.topicsID} topicPages={topicPages}/>
: <TopicsList/>}
</div>
);
}
};
import {React, ReactDOM} from '../../build/react';
import SingleTopicBox from './single-topic-box.jsx';
import SelectedTopicPage from './selected-topic-page.jsx';
import topicPages from '../content/json/topic-pages.js';
export default class TopicsList extends React.Component {
onClick(){
this.props.onClick.bind(null, this.topicID);
},
render() {
return (
<div className="row topic-list">
<SingleTopicBox topicID="1" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="2" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="3" onClick={this.onClick} label="Topic"/>
<SingleTopicBox topicID="4" onClick={this.onClick} label="Topic"/>
</div>
);
}
};
import {React, ReactDOM} from '../../build/react';
export default class SingleTopicBox extends React.Component {
render() {
return (
<div>
<div className="col-sm-2">
<div className="single-topic" data-topic-id={this.props.topicID}>
{this.props.label} {this.props.topicID}
</div>
</div>
</div>
);
}
};
从'../../build/React'导入{React,ReactDOM};
导出默认类SingleTopicBox扩展React.Component{
render(){
返回(
{this.props.label}{this.props.topicID}
);
}
};
您有几个错误
onClick
传递到TopicsList
render() {
return (
<div className="row">
{this.state.isTopicClicked
? <SelectedTopicPage
topicsID={this.state.topicsID}
key={this.state.topicsID}
topicPages={topicPages} />
: <TopicsList onClick={ this.onClick.bind(this) } />}
</div>
);
}
onClick
从props
<SingleTopicBox topicID="1" onClick={this.props.onClick} label="Topic"/>
setState
两次
onClick(topicID) {
this.setState({
isTopicClicked: true,
topicsID: topicID
});
}