React使用Props实现父组件向子组件传值

// 父组件
function ParentComponent() {
  const message = 'Hello from Parent';
  return <ChildComponent message={message} />;
}

// 子组件
function ChildComponent(props) {
  return <div>{props.message}</div>;
}

// 父组件
function ParentComponent() {
  const user = { name: 'Alice', age: 25 };
  return <UserProfile user={user} />;
}

// 子组件
function UserProfile(props) {
  return (
    <div>
      <h1>{props.user.name}</h1>
      <p>Age: {props.user.age}</p>
    </div>
  );
}

// 父组件
function ParentComponent() {
  const handleButtonClick = () => {
    alert('Button clicked in ChildComponent!');
  };

  return <ChildComponent onButtonClick={handleButtonClick} />;
}

// 子组件
function ChildComponent(props) {
  return <button onClick={props.onButtonClick}>Click me</button>;
}

//index.tsx
const [formObject, setformObject] = useState({
        disabled: false,
        defineData: {},
    })
const edit = (data)=>{
        post('/adminapi/menu/edit', {id:data['id']}).then((res) => {
            if (childComponentRef.current) {
                childComponentRef.current.showModal();
                setformObject({disabled:false,defineData:res.data[0]})
            }
        })
    }
```const formModel = <PageOneForm formObject={formObject} ref={FormRef}></PageOneForm>
    return (
        <div>
            <Query queryList={queryList} openAdd={openAdd} ref={queryRef} getQueryDateFun={getQueryDateFun}></Query>
            <div style={listStyle}>
                <Tabel ref={tabelRef} columns={columns}></Tabel>
            </div>
            <Modal ref={childComponentRef} formModel={formModel} DialogTitle={'菜单管理'} onOk={handelOk}></Modal>
        </div>
    )

---