快捷導(dǎo)航

React使用Props實現(xiàn)父組件向子組件傳值

更新時間：2025年04月08日 09:22:03 作者：阿珊和她的貓

在React中,組件之間的數(shù)據(jù)傳遞通常是通過屬性（Props）來實現(xiàn)的,父組件可以通過屬性向子組件傳遞數(shù)據(jù),這是React組件通信的基礎(chǔ)模式之一,本文將探討如何使用Props來實現(xiàn)父組件向子組件傳遞數(shù)據(jù),需要的朋友可以參考下

組件和Props的基礎(chǔ)

React組件是構(gòu)建用戶界面的基本單元，它們可以是類組件或函數(shù)組件。Props（屬性）是父組件傳遞給子組件的只讀數(shù)據(jù)。子組件可以通過定義Props來接收來自父組件的數(shù)據(jù)。

父組件向子組件傳值

父組件可以通過在子組件的標簽上添加屬性來傳遞數(shù)據(jù)。這些屬性的值可以是任何JavaScript數(shù)據(jù)類型，包括字符串、數(shù)字、布爾值、對象、數(shù)組甚至是函數(shù)。

示例：傳遞簡單數(shù)據(jù)

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

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

在這個例子中，ParentComponent通過message屬性向ChildComponent傳遞了一個字符串。

示例：傳遞復(fù)雜數(shù)據(jù)

// 父組件
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>
  );
}

在這個例子中，ParentComponent通過user屬性向UserProfile組件傳遞了一個對象。

傳遞函數(shù)作為Props

除了傳遞數(shù)據(jù)，父組件還可以通過Props向子組件傳遞函數(shù)，這樣子組件就可以調(diào)用這些函數(shù)來與父組件通信。

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

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

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

在這個例子中，ParentComponent傳遞了一個名為onButtonClick的函數(shù)給ChildComponent，子組件通過這個函數(shù)與父組件進行交互。

結(jié)論

通過Props傳遞數(shù)據(jù)是React中實現(xiàn)父子組件通信的基本方式。這種機制簡單、直觀，是構(gòu)建可復(fù)用組件的關(guān)鍵。通過Props，父組件可以控制子組件的渲染和行為，同時保持組件之間的解耦。

拓展延伸：react props傳值頁面不更新

項目場景：

背景：

react-vite-antd

問題描述

通過props傳值，點擊編輯數(shù)據(jù)傳過去了，頁面沒更新

//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>
    )

---

改成這個之后好使了

原因分析：

Form.useForm() 是 Ant Design 中 Form 表單組件提供的自定義 hook，用于創(chuàng)建表單實例，使表單的狀態(tài)和操作可以被更好地管理。它是 Ant Design 提供的方便工具，用于幫助您更輕松地處理表單數(shù)據(jù)和交互。

通過使用 Form.useForm()，您可以創(chuàng)建一個表單實例，并使用該實例來進行以下操作：

表單數(shù)據(jù)初始化：通過 form.setFieldsValue() 方法，您可以初始化表單中的字段值，將外部數(shù)據(jù)與表單關(guān)聯(lián)起來。
獲取表單數(shù)據(jù)：使用 form.getFieldsValue() 可以輕松地獲取表單中的字段值。
表單驗證：您可以使用 form.validateFields() 來觸發(fā)表單的驗證，以確保數(shù)據(jù)的正確性。
提交表單：使用 form.submit() 來提交表單數(shù)據(jù)。

這些功能有助于更有效地管理表單狀態(tài)，簡化表單操作，以及與外部數(shù)據(jù)的交互。 Ant Design 的 Form.useForm() 是一個方便的工具，特別是對于需要處理復(fù)雜表單的 React 應(yīng)用程序。

以上就是React使用Props實現(xiàn)父組件向子組件傳值的詳細內(nèi)容，更多關(guān)于React Props父組件向子組件傳值的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: