react的传值问题

1.父传子

由content.js向left.js传值：

contents.js:

import React from 'react';
import Left from './left.js';
import { Right } from './right.js';

export class Contents extends React.Component {
    constructor() {
        super();
        this.state = { ctitle: "web67成绩"}
    }
    getTitle(newtitle){
        this.setState({ctitle:newtitle});
    }
    render() {
        return <div className="content">
            <h4>{this.state.ctitle}</h4> {/* 数据的属性值 */}
            <Left names="lily" getTitle={this.getTitle.bind(this)}></Left>    {/* 绑定和发送值 */}
            <Right></Right>
        </div>
    }
}

 left.js:

import React from 'react';

export default class Left extends React.Component {
    constructor() {
        super();
    }
    ltitle() {
        this.props.getTitle("计算机考试");
    }
    render() {
        return <div className="left">
            <h5>姓名:{this.props.names}</h5>{/* props 由父组件传递给子组件，并且就子组件而言，props 是不可变的。 */}
            <input type="button" name="but" value="改变标题" onClick={this.ltitle.bind(this)} />
        </div>
    }
}

最终效果图：

 点击前：

 点击后：

解释：(组件的状态（state）和属性（props）之间的不同点：)

1.State 是一种数据结构，用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

2.Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。组件不能改变自身 的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。

2.子传父

子传父利用的是state的数据结构传值的，由left.js向contents.js传值：

 contents.js:

import React from 'react';
import Left from './left.js';
import { Right } from './right.js';

export class Contents extends React.Component {
    constructor() {
        super();
        this.state = { ctitle: "web67成绩", stuscores: [] }
    }
    getTitle(n, s) {
        this.state.stuscores.push({ names: n, score: s });
        this.setState({ stuscores: this.state.stuscores });
        console.log(this.state.stuscores)
    }
    render() {
        return <div className="content">
            <h4>{this.state.ctitle}</h4>
            <Left getTitle={this.getTitle.bind(this)}></Left>
            <Right></Right>
        </div>
    }
}

left.js:

import React from 'react';

export default class Left extends React.Component {
    constructor() {
        super();
    }
    ltitle() {
        this.props.getTitle(this.username.value, this.score.value);
    }
    render() {
        return <div className="left">
            姓名：<input type="text" ref={ref => this.username = ref} />
            成绩：<input type="number" ref={ref => this.score = ref}  />
            <input type="button" name="but" value="录入成绩" onClick={this.ltitle.bind(this)} />
        </div>
    }
}

 最终效果图：(分别输入张三，100；李四，99；王五，98后的结果)

3.子传子

子传子文件是先让参数从子文件left.js传到父文件contents.js,然后再传到子文件right.js中：

left.js:

import React from 'react';

export default class Left extends React.Component {
    constructor() {
        super();
    }
    ltitle() {
        this.props.getTitle(this.username.value, this.score.value);
    }
    render() {
        return <div className="left">
            姓名：<input type="text" ref={ref => this.username = ref} />
            成绩：<input type="number" ref={ref => this.score = ref} />
            <input type="button" name="but" value="录入成绩" onClick={this.ltitle.bind(this)} />
        </div>
    }
}

 contents.js:

import React from 'react';
import Left from './left.js';
import { Right } from './right.js';

export class Contents extends React.Component {
    constructor() {
        super();
        this.state = { ctitle: "web67成绩", stuscores: [] }
    }
    getTitle(n, s) {
        this.state.stuscores.push({ names: n, score: s });
        this.setState({ stuscores: this.state.stuscores });
    }
    render() {
        return <div className="content">
            <h4>{this.state.ctitle}</h4>
            <Left getTitle={this.getTitle.bind(this)}></Left>
            <Right students={this.state.stuscores}></Right>
        </div>
    }
}

 right.js:

 import React from 'react';
export class Right extends React.Component {
    constructor(){
        super();
    }
    render() {
        return <div className="right">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>成绩</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.students.map((v, i) => {
                        return <tr key={i+"link" }>
                            <td>{i + 1}</td>
                            <td>{v.names}</td>
                            <td>{v.score}</td>
                        </tr>
                    })}
                </tbody>
            </table>
        </div>
    }
}

 最终效果图：(分别把张三，100；李四，99；王五，98；输入进去)