如何在 JSX 中的箭头 function 内调用另一个 function ？

Question

我有一个使用回调 function 的组件，当它执行时，我让它渲染一个视频标签。 但我也想在视频标签之后使用 ipcRenderer.send ，但不知道如何正确编写它来实现它。

        <div className="main-user-video">
          {/* TODO: Use WebRTC.onCallUserAdded to add another and add another video with the new remoteStream */}
              <video
                id="video_player"
                className="main-user-video"
                // style={
                //   this.state.knocking.callAccepted
                //     ? null
                //     : { filter: "grayscale(100%)" }
                // }
                controls={false}
                ref={this.remoteVideo}
                autoPlay={true}
              ></video>
                {WebRTC.onCallUserAdded((err, callId, userId, audio, video, remoteStream, usersInCall) =>
                  <video
                  id="video_player"
                  className="main-user-video"
                  controls={false}
                  ref={remoteStream}
                  autoPlay={true}
                ></video>
                {(usersInCall > 2) ? electron.ipcRenderer.send("MULTI-PARTY-CALL") : null}
                )}
        </div>

在第二个视频标签之后是我想使用 ipcRenderer 的地方。

Answer 1

箭头函数是返回值的 function 的简写。

() => <video/>

等于

() => {
  return <video/>
}

您可以在返回之前在块中做任何您想做的事情

() => {
  // call function or any process
  return <video/>
}