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

Question

I have index.js, that is a javascript file with no classes which uses RenderDOM to render the component timeline and initialize some arrays with data, and index.js have a function playSound(), I have sent playSound as a prop to timeline, but it returns error this.props.playSound is not a function.

For a different function name ie "playSound()" it works, but with"onPlayFrames" it don't get recognized as function on timeline.jsx

I send the prop like this: (index.js)

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

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

and use it on timeline like this: (timeline.jsx)

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

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

i just get the error "this.state.onPlayFrames is not a function" when i try to use the function, it doesn't matters what i do

Answer 1

Within timeline.jsx:

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

This should this.props.playSound(arg) . The reason is because it has to match what you are using as a property na:

<Timeline playSound={playSound}/>

---

To make it clearer, imagine you did this:

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

The Property on Timeline is now foobar which means on Timeline, it will be passed the onPlayFrames function via a property called foobar .

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

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

Answer 2

I just tried this code pen.Is this what your asking?

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')
);