在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>
运行结果:
点击传值:
点击修改:
再次点击传值:
ok啦!感谢观看!
如果使用脚手架创建一个react项目就无序前几步的操作直接敲代码就行,本身已经做好了各项的配置工作。