React中的组件传值

最新推荐文章于 2025-05-16 16:20:07 发布

原创最新推荐文章于 2025-05-16 16:20:07 发布 · 935 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

React 专栏收录该内容

4 篇文章

订阅专栏

在react中传值方式有：

props、context、redux、react-router路由传值

下面详情讲一下父传子，子传父。

一、父组件向子组件传值

1、首先先建一个html文件。

2、然后在html文件中引入react的相关文件。

   <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
   <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
   <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

react是用jsx编写的，jsx是JavaScript的一种扩展,浏览器无法识别jsx需要用第三行代码编译一下。

3、创建一个类组件作为父组件，并在组件构造器中声明私有数据（函数组件不行），创建一个函数组件作为子组件，通过props接受父组件传的值，并显示数据。

 <div id="app"></div>
    <script type="text/babel">//告诉浏览器这里的js需要使用babel包进行编译
        // 类组件
        class Father extends React.Component {
            constructor() {
                super();
                this.state = {
                    nums: [12, 23, 34, 45, 56],
                };
            }
            render() {
                let { nums } = this.state;
                return (
                    <div >
                        <h1>父组件：{nums[4]}</h1>
                        <Son nums3={nums[3]} /> {/*显示子组件并向子组件传值*/}
                    </div>
                )
            }
        }
        // 函数组件
        function Son(props) {
       
            return (
                <div>
                    <h2>子组件：{props.nums3}</h2>
                </div>
            )
        }
        ReactDOM.render(<Father />, document.getElementById("app"))
    </script>

运行结果：

二、子组件向父组件传值

前几步都一样

父组件声明好私有数据，新建一个函数并传进一个参数用来修改数据。向子组件传递这个函数，子组件通过props接受并处理。

<body>
    <div id="app"></div>
    <script type="text/babel">//告诉浏览器这里的js需要使用babel包进行编译
        // 父组件
        class Father extends React.Component {
            constructor() {
                super();
                this.state = {
                    fname: "",
                };
            }
            setName(son_name) {
                this.setState({
                    fname: son_name,
                })
            }
            render() {
                return (
                    <div >
                        <h1>父组件：{this.state.fname}</h1>
                        {/* 父组件向子组件传递函数*/}
                        <Son fnamec={this.setName.bind(this)} />
                    </div>
                )
            }
        }
        // 子组件
        class Son extends React.Component {
            state = {
                name: "小明",
            }
            render() {
                return (
                    <div>
                        <h2>子组件：{this.state.name}</h2>
                        {/*接收函数并处理*/}
                        <button onClick={() => this.props.fnamec(this.state.name)}>传值（子-父）</button>
                        {/*修改子组件组*/}
                        <button onClick={() => this.setState({
                            name: "小刚",
                        })}>修改值</button>

                    </div>
                )
            }
        }
        ReactDOM.render(<Father />, document.getElementById("app"))
    </script>

</body>

运行结果：