组件渲染后如何在ReactJS中将数据从父级传递到子级

问题描述

我已经做了很多搜索，但似乎找不到答案-也许我只是没有使用正确的术语。

我需要做的是将数据从WebSocket组件传递到子组件。我已经通过道具将WebSocket传递给了孩子，以便它可以使用send（）函数并将数据发送到套接字。我还需要通过onmessage传递任何接收到的数据。以通常的方式在孩子体内进行设置无效。

我需要做的是，当套接字中接收到数据时，该数据被发送给孩子，孩子内部具有一个可以对它进行处理的功能（使用Web MIDI API通过MIDI发送）

父母

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
  }
}

javascript reactjs reactjs websocket