父组件应该如何写才能拿到子组件传过来的数据

父组件可以通过两种方式拿到子组件传过来的数据：props和回调函数。

1. 使用props：在父组件中定义一个属性，然后在子组件中通过props将数据传递给父组件。

父组件示例：

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

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

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

  return (
    <div>
      <ChildComponent sendData={handleData} />
      <p>Received data from child: {data}</p>
    </div>
  );
}

export default ParentComponent;

子组件示例：

import React from 'react';

function ChildComponent(props) {
  const sendDataToParent = () => {
    const data = 'Hello parent!';
    props.sendData(data);
  };

  return (
    <div>
      <button onClick={sendDataToParent}>Send Data</button>
    </div>
  );
}

export default ChildComponent;

2. 使用回调函数：在父组件中定义一个函数，并将其作为props传递给子组件，在子组件中调用该函数并传递数据。

父组件示例：

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

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

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

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

export default ParentComponent;

子组件示例：

import React from 'react';

function ChildComponent(props) {
  const sendDataToParent = () => {
    const data = 'Hello parent!';
    props.onData(data);
  };

  return (
    <div>
      <button onClick={sendDataToParent}>Send Data</button>
    </div>
  );
}

export default ChildComponent;

无论使用哪种方式，父组件都可以接收子组件传递的数据并进行处理。