Question

我最近开始学习React，我正在尝试构建一个简单的音频播放器。我目前正在使用此示例作为参考，但它内置在一个文件中

https://github.com/CezarLuiz0/react-cl-audio-player

我试图制作的是以“React”方式完成的，其中UI具有可重用的组件，但是我无法将代码分成有意义的工作组件。例如，如果我尝试将一些渲染代码从父组件（AudioPlayer）移动到（PlayButton）中，则在父组件的安装上创建的音频方法突然变得对子组件不可访问。

这是我的代码回购。

https://github.com/vincentchin/reactmusicplayer

它现在有效，但我想改进它。如果有人能指出这方面的巨大缺陷，那也很棒，因为我确信我已经违反了一些规则或标准来编写React。

Answer 1

您可以通过将方法作为prop传递，然后在子组件内调用它来从子组件访问父组件的方法。

例如（在子组件的渲染方法中）：

<button onClick={this.props.methodFromTheParent}>Click me</button>

您还可以将参数传递给这些方法：

<button onClick={this.props.methodFromTheParent.bind(null, 'Hello')}>Click me</button>

在将值绑定到属于父组件的方法时，请记住传递null而不是this作为第一个参数。

我也浏览了你的回购。您可以通过将不同的元素放入它们自己的组件中来大量清理AudioPlayer组件。

render方法看起来像这样：

render() {
    return (
      <div>
          <PlayButton onClick={this.togglePlay} playing={this.state.playing} />
          {!this.state.hidePlayer ?
          (<Player
             playerState={this.state}
             togglePlay={this.togglePlay}
             setProgress={this.setProgress}
             ...
          />) : null}
      </div>
    );
  }

然后在新创建的Player组件中：

render() {
  var pState = this.props.playerState; // Just to make this more readable
  return (
    <div className="player">
      <PlayButton onClick={this.props.togglePlay} playing={pState.playing} />
      <Timeline
        currentTimeDisplay={pState.currentTimeDisplay}
        setProgress={this.props.setProgress}
        progress={pState.progress}
        ...
      />
      <VolumeContainer
        onMouseLeave={this.props.noShow}
        setVolume={this.setVolume}
        toggleMute={this.toggleMute}
        ...
      />
    </div>
  );
}

您可以根据需要将布局分解为尽可能多的嵌套组件，这是有意义的。

请记住在子组件中实际添加onClick属性（<button onClick={this.props.onClick}>Play</button>）。

使用HTML5在React中构建简单的音频播放器时遇到问题

1 个答案: