React-Learning-day02

发表于

Props
父传递给子组件数据，单向流动，不能子传递给父。
Props的传值，可以是任意的类型。

props可以设置默认值
HelloMessage.defaultProps = { name: “老陈”，msg: “helloworld”}

注意：props可以传递函数，props可以传递父元素的函数，就可以去修改父元素的state，从而达到传递数据给父元素。

React 数据传递：父传子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React from 'react';
import ReactDOM from 'react-dom';
import './01props.css'

//在父元素中使用state去控制子元素props，从而达到父元素数据传递给子元素
class ParentCom extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      isActive: true
    }
    this.changeShow = this.changeShow.bind(this)
  }

  render() {
    return (
      <div>
        <button onClick={this.changeShow}>控制子元素显示</button>
        <ChildCom isActive={this.state.isActive}></ChildCom>
      </div>
    )
  }

  changeShow() {
    this.setState({
      isActive: !this.state.isActive
    })
  }
}

class ChildCom extends React.Component{
  constructor(props) {
    super(props)
  }

  render() {
    let strClass = null;

    if (this.props.isActive) {
      strClass = "active"
    } else {
      strClass = ""
    }

    return (
      <div className={"content "+strClass}>
        <h1>我是子元素</h1>
      </div>
    )
  }
}

ReactDOM.render(
  <ParentCom></ParentCom>,
  document.querySelector('#root')
)

React 数据传递：子传父
调用父元素的函数，从而操作父元素的数据，从而实现数据从子元素传递至父元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
import React from 'react';
import ReactDOM from 'react-dom';

//子传父
class ParentCom extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      childData: null
    }
  }

  render() {
    return (
      <div>
        <h1>子元素传递给父元素的数据：{this.state.childData}</h1>
        <ChildCom setChildData={this.setChildData}></ChildCom>
      </div>
    )
  }

  setChildData=(data)=> {
    this.setState({
      childData: data
    })
  }
}

class ChildCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      msg: "helloworld",
    };
  }

  render() {
    return (
      <div>
        <button onClick={this.sendData}>传递helloworld给父元素</button>
        <button onClick={()=>{this.props.setChildData('直接调用props的函数')}}>传递helloworld给父元素</button>        
      </div>
    );
  }

  //使用箭头函数，就不再需要在构造函数中绑定this
  sendData = () => {
    // console.log(this.state.msg)
    //将子元素传递给到父元素，实际就是调用父元素传递进来的父元素函数
    this.props.setChildData(this.state.msg)
  }
}

ReactDOM.render(
  <ParentCom></ParentCom>,
  document.querySelector('#root')
)

REACT 事件

特点：
1、react事件，绑定事件的命名，驼峰命名法：第二个单词的首字母大写。
2、{}括起来，传入1个函数，而不是字符串。

1
<button onClick={this.sendData}>传递helloworld给父元素</button>

事件对象：React返回的事件对象是代理的原生的事件对象，如果想要查看事件对象的某个具体值，必须直接输出事件对象的属性。

原生，阻止默认行为时，可以直接返回return false;
React中，阻止默认必须使用e.preventDefault()

React事件传参数

1
2
3
4
{/* 使用ES6箭头函数传递多个参数 */}
<button onClick={(e) => { this.parentEvent1("msg: helloworld", e); }}>提交</button>
{/* 不使用ES6箭头函数传递多个参数的方式 */}
<button onClick={function(e){this.parentEvent1("不使用ES6，msg: helloworld", e);}.bind(this)}>提交</button>

React 条件渲染

React中条件渲染即和javascript中，条件运算，如if…else…三元运算符等。
1、直接通过条件运算，返回要渲染的JSX对象
2、通过条件运算得出JSX对象，再将JSX对象渲染到模板中。

案例一：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React from 'react';
import ReactDOM from 'react-dom';

function UserGreet(props) {
  return (
    <h1>欢迎登陆</h1>
  )
}

function UserLogin(props) {
  return (
    <h1>请先登陆</h1>
  )
}

class ParentCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: true,
    };
  }
  render() {
    if (this.state.isLogin) {
      return <UserGreet></UserGreet>;
    } else {
      return <UserLogin></UserLogin>;
    }
  }
}

ReactDOM.render(
  <ParentCom></ParentCom>,
  document.querySelector('#root')
)

案例二：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React from 'react';
import ReactDOM from 'react-dom';

function UserGreet(props) {
  return (
    <h1>欢迎登陆</h1>
  )
}

function UserLogin(props) {
  return (
    <h1>请先登陆</h1>
  )
}

class ParentCom extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: true,
    };
  }

  render() {
    let element = null;
    if (this.state.isLogin) {
      element = <UserGreet></UserGreet>;
    } else {
      element = (<UserLogin></UserLogin>);
    }

    return (
      <div>
        <h1>这是头部</h1>
        {element}
        <h1>这是单元运算符的操作</h1>
        {this.state.isLogin ? <UserGreet></UserGreet> : <UserLogin></UserLogin>}
        <h1>这是尾部</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <ParentCom></ParentCom>,
  document.querySelector('#root')
)

列表渲染

将列表的内容拼装成数组，放置到模板中。
将数据拼装成数组的JSX对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import ReactDOM from 'react-dom';

let arr = ['小明', '小黑', '小白']
let arrHtml = [
  <li>小明</li>,
  <li>小黑</li>,
  <li>小白</li>
]

class Welcome extends React.Component{
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>
        <ul>
          {arrHtml}
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <Welcome></Welcome>,
  document.querySelector('#root')
)

使用数组的map方法，对每一项数据按照JSX的形式进行加工，最终得到1个每一项都是JSX对象的数组，再将数组渲染到模板中。
Key值需要放置到每一项中。

简单案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import React from 'react';
import ReactDOM from 'react-dom';


class Welcome extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          title: "第一节：react事件",
          content: "事件内容",
        },
        {
          title: "第二节：react数据传递",
          content: "数据传递内容",
        },
        {
          title: "第三节：条件渲染",
          content: "条件渲染内容",
        }
      ]
    }
  }

  render() {
    let listArr = [];
    for (let i = 0; i < this.state.list.length; i++){
      let item = (
        <li>
          <h3>{this.state.list[i].title}</h3>
          <p>{this.state.list[i].content}</p>
        </li>
      )
      listArr.push(item);
    }

    return (
      <div>
        <h1>
          今天内容
        </h1>

        <ul>
          {listArr}
          <li>
            <h3>这是标题</h3>
            <p>内容</p>
          </li>
        </ul>
      </div>
    )
  }
}

ReactDOM.render(
  <Welcome></Welcome>,
  document.querySelector('#root')
)

复杂案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import React from 'react';
import ReactDOM from 'react-dom';

function ListItem(props) {  
  return (
    <li>
      <h3>
        {props.index+1}:listItem:{props.data.title}
      </h3>
      <p>{props.data.content}</p>
    </li>
  );
}

class ListItem2 extends React.Component{
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <li onClick={(event)=>{this.clickEvent(this.props.index, this.props.data.title, event)}}>
        <h3>
          {this.props.index + 1}:listItem:{this.props.data.title}
        </h3>
        <p>{this.props.data.content}</p>
      </li>
    );
  }
  clickEvent = (index, title, event) => {
    alert((index+1)+"-"+title)
  }
}

class Welcome extends React.Component{
  constructor(props) {
    super(props)
    this.state = {
      list: [
        {
          title: "第一节：react事件",
          content: "事件内容",
        },
        {
          title: "第二节：react数据传递",
          content: "数据传递内容",
        },
        {
          title: "第三节：条件渲染",
          content: "条件渲染内容",
        }
      ]
    }
  }

  render() {
    let listArr = this.state.list.map((item, index) => {
      return (
        <ListItem2 key={index} data={item} index={index}></ListItem2>
        // <li key={index}>
        //   <h3>{index}:{item.title}</h3>
        //   <p>{item.content}</p>
        // </li>
      );
    })
    console.log(listArr)

    return (
      <div>
        <h1>今天内容</h1>

        <ul>
          {listArr}
          <li>
            <h3>这是标题</h3>
            <p>内容</p>
          </li>
        </ul>

        <h1>复杂，没有用组件，完成列表</h1>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li
                key={index}
                onClick={(event) => {
                  this.clickFn(index, item.title, event);
                }}
              >
                <h3>
                  {index + 1}-复杂-{item.title}
                </h3>
                <p>{item.content}</p>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

  clickFn = (index, title, event) => {
    alert((index + 1) + "-clickFn-" + title)
  }
}

ReactDOM.render(
  <Welcome></Welcome>,
  document.querySelector('#root')
)