javascript - 使用 React 从另一个组件添加到组件

标签 javascript reactjs

我有一个在 App.js 中创建的 footer,现在我有另一个名为 KokPlayer.js 的组件,我想添加从 KokPlayer.jsApp.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/

相关文章:

javascript - JavaScript 在哪里?

javascript - 使用 JSON.parse 的 JSON 到 HTML 未定义错误

javascript - 如何在选择选项字段中选择特定的自定义属性?

reactjs - React i18next Backend-Path 在本地和生产环境中不同

javascript - React 添加自定义 props 到普通 html 元素

javascript - 单击激活滚动并拖动另一个元素

javascript - 使用 toBeDefined 的 karma 测试 Controller 失败

css - 无法更改 Material ui中文本字段的字体大小

javascript - 如何在不使用 -webkit-app-region 的情况下在 Electron 中移动无框窗口

reactjs - 如何使用异步请求服务器渲染 redux 应用程序?