我是javascript世界的新手,正在使用react.js创建一个前端应用程序。以下是我无法编写的场景。 我想显示一个项目列表,这样当我点击列表中的任何一个项目时,我只会看到所选项目的详细信息并删除项目视图。我尝试使用react-router库,但是react-router以嵌套方式工作,其中子组件的详细信息呈现在父组件下(项目列表)。它不会隐藏父组件。
我是javascript世界的新手,正在使用react.js创建一个前端应用程序。以下是我无法编写的场景。 我想显示一个项目列表,这样当我点击列表中的任何一个项目时,我只会看到所选项目的详细信息并删除项目视图。我尝试使用react-router库,但是react-router以嵌套方式工作,其中子组件的详细信息呈现在父组件下(项目列表)。它不会隐藏父组件。
您可以将一个函数传递给子组件的 onClick
属性,并在该函数中处理隐藏事件。一个简单的实现如下:
class Parent extends React.Component {
constructor() {
super(...arguments);
this.state = {hide: false};
}
handleChildClick() {
this.setState({hide: true});
}
render() {
const {hide} = this.state;
if (hide) {
return null;
}
return <Child onClick={this.handleChildClick.bind(this)} />;
}
}
class Child extends React.Component {
render() {
const {onClick} = this.props;
return <button onClick={onClick}>Hide Parent</button>;
}
}