我有一个在 App.js
中创建的 footer
,现在我有另一个名为 KokPlayer.js
的组件,我想添加从 KokPlayer.js
到 App.js
中的 footer
的按钮。
我怎样才能做到这一点?
App.js
render() {
const { expanded } = this.state;
return (
<React.Fragment>
<nav
className="footer navbar navbar-light bg-success mb-auto"
ref="footerRef"
/>
</React.Fragment>
);
}
KokPlayer.js
render() {
// Add this block to footer
return (
<div
style={{ display: "block", margin: "0 auto", verticalAlign: "middle" }}
>
<Button onClick={this.play} className="mr-3">
play()
</Button>
<Button onClick={this.pause} className="mr-3">
pause()
</Button>
<Button onClick={this.toggleFullScreen} className="mr-3">
FullScreen()
</Button>
</div>
);
}
最佳答案
据我了解您在评论中所写的内容,您可以将 prop 传递给 KokPlayer 组件,然后您可以隐藏不想在 App.js 中显示的元素
在App.js中
import KokPlayer from './KokPlayer' // KokPlayer location
...
render() {
const { expanded } = this.state;
return (
<React.Fragment>
<nav
className="footer navbar navbar-light bg-success mb-auto"
ref="footerRef"
/>
<KokPlayer showButtonsOnly={true} /> // the buttons here
</React.Fragment>
);
}
KokPlayer.js
render() {
// Add this block to footer
return (
<div>
{!this.props.showButtonsOnly && <div> // it wouldn't be shown in App.js
Screen Here
</div>}
<div style={{ display: "block", margin: "0 auto", verticalAlign: "middle" }}
>
<Button onClick={this.play} className="mr-3">
play()
</Button>
<Button onClick={this.pause} className="mr-3">
pause()
</Button>
<Button onClick={this.toggleFullScreen} className="mr-3">
FullScreen()
</Button>
</div>
</div>
);
}
关于javascript - 使用 React 从另一个组件添加到组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55141918/