写一个子组件，里面有一个label 和 一个输入框， label的表示内容是由外部传入的，当输入框内输入值后将这个值传递给父组件 父组件将输入的值输出在页面上

在React中创建这样一个子组件，你可以定义一个名为`InputLabel`的组件，它接受两个属性：`labelContent`用于显示标签的内容，以及`onChange`事件处理函数，用于当输入框内容变化时通知父组件更新。

import React, { useState } from 'react';

// 定义InputLabel组件
const InputLabel = ({ labelContent, onChange }) => {
  // 使用useState管理输入框的状态
  const [inputValue, setInputValue] = useState('');

  // 当输入框内容改变时，触发onChange并更新状态
  const handleChange = (event) => {
    setInputValue(event.target.value);
    onChange(inputValue); // 通过onChange回调传递新输入的值
  };

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

export default InputLabel;

// 父组件示例，展示如何使用InputLabel
function ParentComponent() {
  const [receivedValue, setReceivedValue] = useState('');

  const handleChildValueChange = (childValue) => {
    setReceivedValue(childValue);
    // 在这里可以将接收到的值显示在页面上，例如：
    console.log(`Received input value: ${receivedValue}`);
  };

  return (
    <div>
      <InputLabel labelContent="请输入内容" onChange={handleChildValueChange} />
      <p>您输入的内容: {receivedValue}</p>
    </div>
  );
}

export default ParentComponent;

在这个例子中，当你在父组件的`InputLabel`子组件的输入框中输入文字，`handleChildValueChange`函数会被调用，将新的值传递给父组件，并更新`receivedValue`，进而显示在页面上。