React使用Props实现父组件向子组件传值-牛翰网

组件和Props的基础

React组件是构建用户界面的基本单元，它们可以是类组件或函数组件。Props（属性）是父组件传递给子组件的只读数据。子组件可以通过定义Props来接收来自父组件的数据。

父组件向子组件传值

父组件可以通过在子组件的标签上添加属性来传递数据。这些属性的值可以是任何JavaScript数据类型，包括字符串、数字、布尔值、对象、数组甚至是函数。

示例：传递简单数据

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

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

在这个例子中，ParentComponent通过message属性向ChildComponent传递了一个字符串。

示例：传递复杂数据

// 父组件
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组件传递了一个对象。

传递函数作为Props

除了传递数据，父组件还可以通过Props向子组件传递函数，这样子组件就可以调用这些函数来与父组件通信。

// 父组件
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的函数给ChildComponent，子组件通过这个函数与父组件进行交互。

结论

通过Props传递数据是React中实现父子组件通信的基本方式。这种机制简单、直观，是构建可复用组件的关键。通过Props，父组件可以控制子组件的渲染和行为，同时保持组件之间的解耦。

拓展延伸：react props传值页面不更新

项目场景：

背景：

react-vite-antd

问题描述

通过props传值，点击编辑数据传过去了，页面没更新

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

---

改成这个之后好使了