在react中单击随机div时将数据发送到父组件

在React中，要实现单击随机div时将数据发送到父组件，可以通过以下步骤来完成：

创建一个父组件，用于接收来自子组件的数据。可以命名为ParentComponent。
在ParentComponent中定义一个状态变量，用于存储从子组件接收到的数据。可以命名为data。
在ParentComponent中创建一个回调函数，用于接收子组件传递的数据。可以命名为handleData。
在回调函数handleData中，将接收到的数据更新到状态变量data中。
在ParentComponent中渲染子组件，并将回调函数handleData作为props传递给子组件。
创建一个子组件，用于显示随机的div，并在单击时将数据发送到父组件。可以命名为ChildComponent。
在ChildComponent中定义一个状态变量，用于存储随机div的数据。可以命名为randomData。
在ChildComponent中创建一个函数，用于生成随机的div数据。可以命名为generateRandomData。
在generateRandomData函数中，生成随机的div数据，并将其更新到状态变量randomData中。
在ChildComponent中创建一个函数，用于将数据发送到父组件。可以命名为sendDataToParent。
在sendDataToParent函数中，调用父组件传递过来的回调函数handleData，并将随机div的数据作为参数传递给它。
在ChildComponent中渲染一个div，并绑定单击事件，当单击时调用sendDataToParent函数。

下面是一个示例代码：

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [data, setData] = useState('');

  const handleData = (childData) => {
    setData(childData);
  };

  return (
    <div>
      <ChildComponent onData={handleData} />
      <p>Data received from child component: {data}</p>
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React, { useState } from 'react';

const ChildComponent = ({ onData }) => {
  const [randomData, setRandomData] = useState('');

  const generateRandomData = () => {
    // Generate random data logic
    const newData = 'Random data';
    setRandomData(newData);
  };

  const sendDataToParent = () => {
    onData(randomData);
  };

  return (
    <div>
      <div onClick={generateRandomData}>Click me for random data</div>
      <button onClick={sendDataToParent}>Send data to parent</button>
    </div>
  );
};

export default ChildComponent;

在上面的示例中，当在ChildComponent中单击"Click me for random data"的div时，会生成随机的数据并存储在randomData状态变量中。然后，当单击"Send data to parent"的按钮时，会调用sendDataToParent函数，该函数会将随机数据通过父组件传递过来的回调函数onData发送到父组件中的handleData函数中。父组件会将接收到的数据更新到data状态变量中，并在页面上显示出来。