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

Question

我有一个footer我在其中创建的App.js，现在我有另一个名为的组件KokPlayer.js，我想将按钮添加KokPlayer.js到footerin 中App.js。

我怎样才能做到这一点？

应用程序.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>
  );
}

标签： javascriptreactjs

Answer 1

据我了解您在评论中写的内容，您可以将道具传递给 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>
  );
}