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

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

我需要做的是将数据从WebSocket组件传递到子组件。我已经在通过props将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} />;
  }
}

类套接字扩展组件{
建造师（道具）{
超级（道具）；
此.state={
ws:null，
};
}
componentDidMount（）{
这个.connect（）；
}
连接=（）=>{
var ws=新的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”]；//需要以某种方式将其发送给子级。
};
......
}
render（）{
返回；
}
}

编辑：所以我设法将数据从父对象获取到子对象，并将其呈现到屏幕上进行测试。但是我不能在我需要的函数中提取它。我尝试过使用箭头函数、绑定“this”等组合。我要么无法访问该函数，要么midi端口返回为未定义或null（默认值）

孩子

类MIDIComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入：空，
MIDI输出：null，
};
}
componentDidMount（）{
常数=this；
这个，那个；
}
setupMIDI=（那个）=>{
requestMIDIAccess（{sysex:true}）；
函数onMIDISuccess（midiAccess）{
setState（{midiInput:Array.from（midiAccess.inputs.values（））[0]}）；
setState（{midiOutput:Array.from（midiAccess.outputs.values（））[1]}）；
that.state.midiInput.onmidimessage=getMIDIMessage；
//在这样的状态下存储midi端口，但它不起作用。
}
函数getMIDIMessage（msg）{
console.log（msg.data）；
那。道具。网匣。发送(
stringify（{message:Array.from（msg.data），键入：“config”}）
);
}
};
sendMIDIMessage=（msg）=>{
this.state.midiOutput.send（msg）；//需要到达此处的midiOutput端口以发送数据
};
render（）{
返回{this.props.midi}；//仅使用它将数据呈现到屏幕上进行测试
}
}

---

我可能应该提到，我最终将拥有两个子组件，它们需要根据接收到的数据类型从套接字接收数据。现在我只想用一个来安装它。非常感谢您的帮助。

只需将接收到的数据保存在以下状态：

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

类套接字扩展组件{
建造师（道具）{
超级（道具）；
此.state={
ws:null，
midi:[]//创建一个空数组，这样子数组总是接收到一些内容，而不是未定义的内容
};
}
componentDidMount（）{
这个.connect（）；
}
连接=（）=>{
var ws=新的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”]；//需要以某种方式将其发送给子级。
这是我的国家({
midi//将接收到的数据保存在状态
});
};
}
render（）{
const{ws，midi}=this.state；//从状态中提取数据
return；//将数据作为道具传递给子级
}
}

我想你不需要那种

。您可以创建单独的函数
getMIDIMessage
和
sendMIDIMessage
，就像您为
setupMIDI
所做的一样。然后，在同一级别的每个函数中，您要么为任何特定逻辑设置状态，要么为相同的
获取道具，如果您更新state react，则将再次呈现它。把数据保存在state上。好的，我会试试这个谢谢，然后我会通过道具把它传下去，就像我现在一样？谢谢，是的，我已经做到了这一点，虽然稍微不同，我现在可以把数据放到子组件中，我只是在一个。我现在遇到的问题是在我的子嵌套函数中检索它，并将它放到我需要使用它的函数中。您可以简单地使用this.props访问该组件中任何位置粘贴的数据。我认为我遇到的问题是“this”一直未定义。我尝试过绑定它，使用箭头函数等，但不起作用。所以我需要使用一个midiOut端口，它是从requestMIDIAccess成功回调创建的，我已经尝试将它保存在状态中，然后从那里访问它。我还需要的功能，以发送MIDI数据每次MIDI道具更新。我编辑了我的问题来展示我在做什么，如果你能看一下的话？我认为很多问题来自MIDIAPI。好的，您不需要在函数中传递这个或那个。使用箭头函数而不是函数关键字，这将按预期工作。由于function关键字不会将外部this传递给函数，而是创建一个新的引用this（函数本身）。所以试着删除function关键字，看看它是否对您有效。是的，我已经尝试过了，我认为问题是因为getMIDIMessage和onmididsuccess是回调函数，当我使用arrow函数时不起作用。我会再试着玩一玩。谢谢你的帮助，因为这回答了我直接提出的问题，我接受了你的回答。因为我想我已经开始偏离原来的问题了，所以我可能会发布一个新的问题

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