親子コンポーネントの値渡し
反応では、propsのメソッドは親から子に使用でき、propsのコールバック関数は子から親の
親コンポーネント
に使用されます。親コンポーネントで状態を定義し、この状態オブジェクトを子に渡します。コンポーネントなので、直接{…this.state}と書くことができます
import React, {
Component } from 'react'
import Son from './son'
export class Parent extends Component {
constructor() {
super()
this.state = {
name: '父组件',
msg: '这是父组件的信息'
}
}
render() {
return (
<div>
<h1>Parent Page</h1>
<h2>我是父组件的：{
msg}--{
name}</h2>
<Son {
...this.state} parentChange={
this.parentChange.bind(this)}/>
</div>
)
}
}
export default Parent
子コンポーネント：
parentMsg：props.msgを状態で書き込み、parentMsgをページに直接表示できるようにします。つまり、親コンポーネントから渡された値です。
import React, {
Component } from 'react'
export class Son extends Component {
constructor(props) {
super()
this.state = {
name: '子组件',
msg: '这是子组件的内容',
parentMsg: props.msg
}
}
render() {
// 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
let {
name, msg, parentMsg } = this.state
return (
<div>
<h1>Son Page</h1>
<p>{
name}-{
msg}</p>
<p>父组件传过来的值{
parentMsg}</p>
</div>
)
}
}
export default Son
親子コンポーネントの重複の問題が解決されました
親コンポーネントには名前msgがあり、子コンポーネントにも変数の名前があります。一緒に使用する場合はどうすればよいですか。
サブコンポーネントでは、状態はそれ自体であり、小道具は外部から渡されるため、小道具の変数に
エイリアスを付けることができます。エイリアスを使用したくない場合は、this.state.nameを使用することもできます。直接、this.props.name
import React, {
Component } from 'react'
export class Son extends Component {
constructor(props) {
super()
this.state = {
name: '子组件',
msg: '这是子组件的内容',
parentMsg: props.msg
}
}
render() {
// 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
let {
name: pName, msg: pMsg } = this.props
let {
name, msg, parentMsg } = this.state
return (
<div>
<h1>Son Page</h1>
<p>{
name}-{
msg}</p>
<p>父组件传过来的值{
parentMsg}-{
pName}-{
pMsg}</p>
</div>
)
}
}
export default Son
子コンポーネントは親コンポーネントの値を変更します
子コンポーネントに入力ボックスを定義し、この入力ボックスを介して親コンポーネントによって表示される値を変更したいと考えています。
アイデア：親コンポーネントにメソッドを記述し、子コンポーネントで呼び出します。
親コンポーネント：
1。関数を定義します。 parentChangeを実行し、内部のデータをパラメーターとして使用します。Passin2
.メソッドを子コンポーネントに渡します<Son{…this.state}parentChange = {this.parentChange.bind（this）} />
import React, {
Component } from 'react'
import Son from './son'
export class Parent extends Component {
constructor() {
super()
this.state = {
name: '父组件',
msg: '这是父组件的信息'
}
}
// 如果要让子组件改父组件的值的话就需要定义这个函数
parentChange(data) {
console.log(data)
this.setState({
msg: data})
}
render() {
let {
name, msg } = this.state
return (
<div>
<h1>Parent Page</h1>
<h2>我是父组件的：{
msg}--{
name}</h2>
{
/* 子组件改父组件的值，就把父组件的改值事件传给子组件进行一个回调 */}
<Son {
...this.state} parentChange={
this.parentChange.bind(this)}/>
</div>
)
}
}
export default Parent
サブコンポーネント：
1。onChange関数を入力ボックスにバインドします
。2。handleChange関数で、親コンポーネントから渡されたメソッドthis.props.parentChange（e.target.value）を呼び出します。渡された値は、入力入力
import React, {
Component } from 'react'
export class Son extends Component {
constructor(props) {
super()
this.state = {
name: '子组件',
msg: '这是子组件的内容',
parentMsg: props.msg
}
}
handleChange = (e) => {
this.setState({
parentMsg: e.target.value})
// 这里对父组件传过来的方法进行调用
this.props.parentChange(e.target.value)
}
render() {
// 在这种父子组件中需要用到同样的属性名的时候,我们会选择定义别名进行区分
let {
name, msg, parentMsg } = this.state
return (
<div>
<h1>Son Page</h1>
<p>{
name}-{
msg}</p>
<p>父组件传过来的值{
parentMsg}</p>
<input type="text" value={
parentMsg} onChange={
this.handleChange} />
</div>
)
}
}
export default Son
値渡しチェック
渡された値のタイプを確認したい場合はどうなりますか？
ここでの検証は、主にコードの可読性を向上させ、共同開発を促進し、効率を向上させることです。
値渡しの検証には、prop-typesを使用する必要があります。react15バージョンの後、prop-typesは手動でダウンロードする必要がある別のパッケージです。
ダウンロードが完了したら、サブコンポーネントページの上部に直接インポートします。
import PropTypes from 'prop-types'
サブコンポーネントで値型の検証を実行
します。構文を使用します。componentname.propTypesはプロパティを追加し、プロパティ値はオブジェクトです
Son.propTypes = {
name: PropTypes.string.isRequired, // 给isRequired属性代表必传项,不传就会报错
msg: PropTypes.string
}
// 如果需要制定默认值则像下面这样使用
Son.defaultProps = {
name: 'beiyu',
msg: '学习react'
}