reactjs 如何将下级的变量传递到父级别

在React中，数据通常是从父组件传递给子组件的。但是，如果需要将子组件的变量传递给父组件，则需要通过回调函数来实现。

下面是一个示例，展示了如何将子组件的变量传递给父组件：

// 父组件
import React, { useState } from 'react';

function ParentComponent() {
  const [childVariable, setChildVariable] = useState('');

  const handleChildVariable = (variable) => {
    setChildVariable(variable);
  };

  return (
    <div>
      <ChildComponent onVariableChange={handleChildVariable} />
      <p>子组件的变量：{childVariable}</p>
    </div>
  );
}

// 子组件
import React, { useState } from 'react';

function ChildComponent({ onVariableChange }) {
  const [childVariable, setChildVariable] = useState('');

  const handleChange = (event) => {
    const variable = event.target.value;
    setChildVariable(variable);
    onVariableChange(variable); // 调用父组件传递的回调函数，将子组件的变量传递给父组件
  };

  return (
    <div>
      <input type="text" value={childVariable} onChange={handleChange} />
    </div>
  );
}

在上述示例中，父组件ParentComponent定义了一个handleChildVariable函数，该函数用于更新父组件的childVariable变量。然后，将该函数作为onVariableChange属性传递给子组件ChildComponent。

在子组件ChildComponent中，通过使用useState来定义childVariable变量，并使用handleChange函数来更新该变量。同时，在handleChange函数中调用父组件传递的onVariableChange回调函数，将子组件的变量传递给父组件。

最后，在父组件中，可以使用childVariable变量来展示子组件的值。

通过这种方式，您可以将子组件的变量传递给父组件