React-如何从另一个组件更改组件内的状态

Question

下面是我要做的；我在App.js中有几个组件，包括导航栏。

目前，我在App.js中有一些代码，它在按钮的点击下隐藏了App.js的几个组件，并同时显示不同的视图。

我想做的是将按钮移动到导航栏，但仍然可以在App.js中切换视图。我应该如何在navigationbar和App.js之间共享状态。

这是我的App.js代码；

class App extends React.Component {
constructor(props) {
super(props);
this.state = {
searchTerm: "",
fileType: "",
resultStats: {},
sidebarShowing: false,
resultFile: {},
showMainView: false,
featuresVisible: true,
};
this.searchReturn = this.searchReturn.bind(this);
this.fileTypeChanged = this.fileTypeChanged.bind(this);
this.resultStatsParse = this.resultStatsParse.bind(this);
this.fileClicked = this.fileClicked.bind(this);
this.onHide = this.onHide.bind(this);
this.settingsFound = this.settingsFound.bind(this);
this.togglemainView = this.toggleMainView.bind(this);
}
toggleMainView = () =>
this.setState({
showMainView: !this.state.showMainView,
featuresVisible: !this.state.featuresVisible,
});
settingsFound(style) {
console.log("Found style");
console.log(style);
this.setState({ style: style });
}
searchReturn(searchResult) {
console.log(searchResult);
this.setState({ searchTerm: searchResult });
}
fileTypeChanged(fileType) {
console.log(fileType);
this.setState({ fileType });
}
resultStatsParse(resultStats) {
console.log(resultStats);
this.setState({ resultStats: resultStats });
}
fileClicked(file) {
this.setState({ resultFile: file });
this.setState({ sidebarShowing: true });
console.log(file);
}
onHide() {
this.setState({ sidebarShowing: false });
}
render() {
const { showMainView } = this.state;
let showingResultsText = (
<>
Found {this.state.resultStats.totalResults} Results out of{" "}
{this.state.resultStats.totalDocuments} for{" "}
<span>{this.state.searchTerm}</span> in{" "}
{this.state.resultStats.timeTook}ms
</>
);
let fileText = <></>;
if (!this.state.searchTerm)
showingResultsText = (
<>
Found {this.state.resultStats.totalResults} Results out of{" "}
{this.state.resultStats.totalDocuments} in{" "}
{this.state.resultStats.timeTook}ms
</>
);
if (this.state.fileType !== "") {
fileText = (
<>
{" "}
showing only <span>.{this.state.fileType}</span>
</>
);
}
let sidebarActive = this.state.sidebarShowing;
let style = this.state.style;
if (style == undefined) {
return (
<>
<SettingsFetchComponent
styleUpdated={this.settingsFound}
></SettingsFetchComponent>
Loading your settings, please wait...{" "}
</>
);
}
return (
<>
<NavBar
onSearchTermChanged={this.searchReturn}
styleOptions={this.state.style}
showMainView={this.state.showMainView}
featuresVisible={this.state.featuresVisible}
></NavBar>
<div>
{this.state.featuresVisible ? (
<div
className="content"
style={{ backgroundColor: style.backgroundColor }}
>
<div
className="sidebar"
style={{ backgroundColor: style.sidebarBackgroundColor }}
>
<FileTypeBar
fileTypeChanged={this.fileTypeChanged}
styleOptions={this.state.style}
></FileTypeBar>
</div>
<div
className="results"
style={{ backgroundColor: style.backgroundColor }}
>
<div
className="resultsSubheader"
style={{ color: style.secondaryTextColor }}
>
{showingResultsText}
{fileText}
</div>
<SearchResultList
onFileActiveChange={this.fileClicked}
searchTerm={this.state.searchTerm}
fileType={this.state.fileType}
pageNumber={1}
onResultsStats={this.resultStatsParse}
styleOptions={this.state.style}
></SearchResultList>
</div>
</div>
) : null}
</div>
<div>
<button onClick={this.toggleMainView}>Toggle</button>
</div>
</>
);
}
}

这是我的导航条形码；

export default class NavBar extends React.Component {
constructor(props) {
super(props);
}
render() {
let style = this.props.styleOptions;
return (
<nav
class="navbar fixed-top"
style={{
backgroundColor: style.navBackground,
borderColor: style.navBorderColor,
}}
>
<div
className="nav-brand-conainter"
style={{ backgroundColor: style.navLogoBackground }}
>
<a class="navbar-brand" href="#">
<img src={style.logoUrl} alt="" />
</a>
</div>
<div className="navbar-contents">
<SearchBar
onSearchTermChanged={this.props.onSearchTermChanged}
style={{ color: style.secondaryTextColor }}
></SearchBar>
</div>
<UserBox></UserBox>
</nav>
);
}
}

我希望能够从NavBar按钮隐藏App.js中的组件，谢谢。

Answer 1

根据您的代码，您似乎已经知道如何做了。以onSearchTermChanged为例。

在NavigationBar组件中执行以下操作：

...
<div>
<button onClick={this.props.onToggle}>Toggle</button>
</div>
...

如果你的导航栏需要知道状态，你可以考虑添加一个额外的处理程序：

constructor(props) {
...
this.handleToggle = this.handleToggle.bind(this);
}
handleToggle() {
this.setState({ toggled: !this.state.toggled });
this.props.onToggle();
}
render() {
...
<div>
<button onClick={this.handleToggle}>Toggle</button>
</div>
...
}

在你的应用程序组件中：

...
<NavBar
onSearchTermChanged={this.searchReturn}
onToggle={this.toggleMainView} // <----
styleOptions={this.state.style}
showMainView={this.state.showMainView}
featuresVisible={this.state.featuresVisible}
></NavBar>
...

Answer 2

要在一个组件中共享状态，可以使用HOC或更高阶的组件来实现。请按照下面的视频链接来清楚地获取HOC。我认为这将有助于解决你的问题https://www.youtube.com/watch?v=B6aNv8nkUSw