Как использовать функцию javascript из компонента React js

Question

У меня есть index.js, это файл javascript без классов, который использует RenderDOM для рендеринга временной шкалы компонента и инициализации некоторых массивов с данными, а в index.js есть функция playSound (), я отправил playSound в качестве опорына временной шкале, но возвращает ошибку this.props.playSound не является функцией.

Для другого имени функции, например, «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 не является функцией», когда я пытаюсь использовать функцию, не имеет значения, что я делаю

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, что означает, что на временной шкале ей будет передана функция onPlayFrames через свойство, называемое foobar.

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

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