PropsとstateによるReact子親コンポーネントのパラメータ伝達

1.効果を実現する

indexページ(親コンポーネント)にサブコンポーネントを導入し、indexのステータスマシンstateを変更し、propsによりサブコンポーネントでコンテンツの変化に応答する

.

ページの操作は以下の

である.

indexページ(親コンポーネント)にサブコンポーネントを導入し、indexのステータスマシンstateを変更し、propsによりサブコンポーネントでコンテンツの変化に応答する

.

ページの操作は以下の

である.

aボタン

をクリック

bボタン

をクリック

cボタン

をクリック
2.Index.jsホームフェース:サブコンポーネントを導入して表示する

import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Layout, Row, Col, Card, Radio } from 'antd';
import Content from './content.js';  //     ;           ，      
const { Header, Content, Footer, Sider } = Layout;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
class Index extends Component {
  //    
  constructor(props) {
    super(props);
    this.state = {
      content: null, //         
    }
  }
  changeState(value){this.setState({content:value})}
  render() {
    return (
      
        
          
            

              

                
                  
                    
                      A //         ，    onClick={this.changeState('valuea')}，        
                      B
                      C
                    
                  
                  
                  
                
              
              
                
              
            
          
        
      
    );
  }
}
export default Index;

3.content.jsサブコンポーネントページ:propsによるホームページstateの変化への応答

import React, { Component } from 'react';
import 'antd/dist/antd.css';  // Add
import { Card } from 'antd';
class content extends React.Component {
  render() {
    return (
      

        

          

            
              {this.props.eventsContent}
            
          
        
      
    );
  }
}
export default content;

4.特別説明:

 
   
 
    
import Content from './content.js'//引入子组件;子组件名称首字母要大写，否则不能识别会报错
 
   
 
   
 
    
单击执行事件的传参调用:onClick={this.changeState.bind(this,'valuea')}(正确)；onClick={this.changeState('valuea')}（错误）会出现死循环调用
 
    
如果需要把多个变量以状态机的方式传值给子组件，可以定义为一个对象，代码如下： 
     
 
      
主页面定义状态机
 
     
 
   
 
   
constructor(props) { //        
    super(props);
    this.state = {
      contents: {
        content_one: null,
        content_two: null,
      }
    }
  }
  
//        
  
 //       
this.props.eventsContent.content_one;
this.props.eventsContent.content_two;