如何使用 React js 组件中的 javascript 函数

Question

我有 index.js，这是一个没有类的 javascript 文件，它使用 RenderDOM 来渲染组件时间线并使用数据初始化一些数组，并且 index.js 有一个函数 playSound()，我已将 playSound 作为道具发送到时间线，但它返回错误 this.props.playSound is not a function。

对于不同的函数名称，即“playSound()”，它可以工作，但对于“onPlayFrames”，它不会在timeline.jsx 上被识别为函数

我这样发送道具：(index.js)

function onPlayFrames(arg){
    // Code to play a sound with arg
}

ReactDOM.render(
    <Timeline onPlayFrames={onPlayFrames}/>
    ,document.getElementById("root")
)

并像这样在时间轴上使用它：(timeline.jsx)

class Timeline extends React.Component {
  constructor(props) {
          super(props);
      }

  playStop(arg) {
      this.props.onPlayFrames(arg);
  }
}

当我尝试使用该功能时，我只是收到错误“this.state.onPlayFrames is not a function”，我做什么并不重要

Answer 1

我刚试过这个代码笔。这是你的要求吗？

function playSound(){
  alert("faf");// Code to play a sound with arg
}
class Test extends React.Component{
render(){
  return <button onClick={()=>this.props.play()}>faf</button>
}
}
const Parent = ()=> <Test play={playSound}/>;

ReactDOM.render(
  <h1><Parent/></h1>,
  document.getElementById('root')
);

Answer 2

在timeline.jsx中：

playStop(arg) {
  this.props.onPlayFrames(arg);
}

这应该是this.props.playSound(arg)。原因是它必须与您用作属性的内容相匹配 na:

<Timeline playSound={playSound}/>

---

为了更清楚，想象一下你是这样做的：

ReactDOM.render(
    <Timeline foobar={onPlayFrames}/>
    ,document.getElementById("root")
)

时间轴上的属性现在是foobar，这意味着在时间轴上，它将通过名为foobar 的属性传递给 onPlayFrames 函数。

class Timeline extends React.Component {
  constructor(props) {
          super(props);
      }

  playStop(arg) {
      this.props.foobar(arg);
  }
}