React父子组件的传值操作

最新推荐文章于 2025-11-29 12:36:26 发布

原创最新推荐文章于 2025-11-29 12:36:26 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #js

本文通过一个简单的React应用示例介绍了如何实现父组件向子组件传递数据。该示例创建了一个名为Father的父组件，它包含一个状态变量content，并通过属性props将其传递给名为Son的子组件。

这里以案例的形式来记录：
准备两个组件，一个为Father，一个为Son，在页面上通过父子组件传值来显示hello world！

创立父组件，并将父组件挂到index中

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Father from './Father';

ReactDOM.render(
  <React.StrictMode>
    {/* JSX语法 */}
    <Father />
  </React.StrictMode>,
  document.getElementById('root')
);

父组件要点

拥有content值
拥有子组件占位
子组件的占位上要有自定义属性来连接父组件的content

// Father组件
import { Component, Fragment } from 'react'
import Son from './Son'

class Father extends Component {
    constructor(props) {
        super(props);
        this.state = {
            content: 'hello world!'
        }
    }
    render() {
        return (
            <Fragment>
                <div>
                    <Son content={this.state.content} />
                </div>
            </Fragment>
        )
    }
}

export default Father

子组件要点

使用this.props来接收到父组件中的content

// Son组件
import React, { Component } from 'react'

class Son extends Component {
    render() {
        const { content } = this.props
        return (
            <div>{content}</div>
        )
    }
}

export default Son