Блог

Я провел много поисков и, похоже, не могу найти ответ на этот вопрос — возможно, я просто не использую правильную терминологию.

Что мне нужно сделать, это передать данные из компонента WebSocket в дочерний компонент. Я уже передаю WebSocket через props дочернему элементу, чтобы он мог использовать функцию send() и отправлять данные в сокет. Мне также нужно передать любые полученные данные через onmessage. Настройка обычным способом внутри дочернего элемента не работает.

Что мне нужно, так это когда данные получены в сокете, они отправляются дочернему элементу с функцией внутри дочернего элемента, чтобы затем что-то с ним сделать (отправить его через MIDI с использованием Web MIDI API)

Родительский

 class Socket extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ws: null,
    };
  }

  componentDidMount() {
    this.connect();
  }
  
  connect = () => {
    var ws = new WebSocket("ws://127.0.0.1:8000/ws/");

    ws.onopen = () => {
      this.setState({ ws: ws });    
    };

    ws.onmessage = (e) => {
      const data = JSON.parse(e.data);
      var midi = data["command"]; // Need to send this to the child somehow.
    };

    ......
}

  render() {
    return <MIDIComponent websocket={this.state.ws} />;
  }
}
  

РЕДАКТИРОВАТЬ: Итак, мне удалось получить данные от родителя к потомку, и я отобразил их на экране для тестирования. Но я не могу извлечь их внутри нужных мне функций. Я пробовал комбинации использования функций со стрелками, привязки ‘this’ и т.д. Я либо не могу получить доступ к этому, либо midi-порты возвращаются как undefined или null, значение по умолчанию.

Дочерний

 class MIDIComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      midiInput: null,
      midiOutput: null,
    };
  }
  componentDidMount() {
    const that = this;
    this.setupMIDI(that);
  }

  setupMIDI = (that) => {
    navigator.requestMIDIAccess({ sysex: true }).then(onMIDISuccess);

    function onMIDISuccess(midiAccess) {
      that.setState({ midiInput: Array.from(midiAccess.inputs.values())[0] });
      that.setState({ midiOutput: Array.from(midiAccess.outputs.values())[1] });
      that.state.midiInput.onmidimessage = getMIDIMessage;
// storing the midi ports in the state like this, but it doesnt work.
    }

    function getMIDIMessage(msg) {
      console.log(msg.data);
      that.props.websocket.send(
        JSON.stringify({ message: Array.from(msg.data), type: "config" })
      );
    }
  };

  sendMIDIMessage = (msg) => {
    this.state.midiOutput.send(msg); // need to get to the midiOutput port here to send the data
  };

  render() {
    return <div key={this.props.midi}>{this.props.midi}</div>; // Just using this to render the data to the screen for testing
  }
}

  

Вероятно, я должен упомянуть, что в конечном итоге у меня будет два дочерних компонента, которым необходимо будет получать данные из сокета в зависимости от типа полученных данных. На данный момент я просто хотел бы настроить его с помощью одного. Любая помощь была бы высоко оценена.

Просто сохраните полученные данные в таком состоянии, как это:

 
class Socket extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ws: null,
      midi: [] // Create an empty array so that the child always received something and not undefined
    };
  }

  componentDidMount() {
    this.connect();
  }
  
  connect = () => {
    var ws = new WebSocket("ws://127.0.0.1:8000/ws/");

    ws.onopen = () => {
      this.setState({ ws: ws });    
    };

    ws.onmessage = (e) => {
      const data = JSON.parse(e.data);
      const midi = data["command"]; // Need to send this to the child somehow.
      this.setState({
        midi // Save the received data in the state
      });
    };

}

  render() {
    const {ws, midi} = this.state; // Extract the data from the state
    return <MIDIComponent websocket={ws} midi={midi}/>; // Pass the data as a prop to the child
  }
}