React-学习总结

Posted 2020-10-20 ss977

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React-学习总结相关的知识，希望对你有一定的参考价值。

基础知识：

1. 组件名称开头必须大写

var NewList = React.createClass(){}

2.ReactDOM.render是React最基本的方法，用于将模板转化为html语言并插入制定DOM节点

3.事件都使用骆驼命名法：onClick onChange

4、this.props.children 表示组件的所有子节点

var NotesList = React.createClass({
  render: function() {
    return (
      <ol>
      {
        React.Children.map(this.props.children, function (child) { // React 提供一个工具方法 React.Children 来处理 this.props.children
          return <li>{child}</li>;
        })
      }
      </ol>
    );
  }
});

ReactDOM.render(
  <NotesList>
    <span>hello</span>
    <span>world</span>
  </NotesList>,
  document.body
);

上面代码的 NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取

5.获取DOM节点-ref属性

获取文本框的值

var inputDom = this.refs.txtData; // 不需要使用findDOMNode()方法

var data = inputDom.value;

6.React提倡所有的数据都是由父组件来管理，通过props的形式传递给子组件来处理 this.props

React开发的规范，组件内部的数据由state控制，外部对内部传递数据时使用 props

7.在组建中添加多个属性写法：

 var Info = React.createClass({
        render:function(){
            var myAttr = {
                ‘ref ‘: ‘txtData‘,
                ‘data-id‘: ‘inputID‘,
                ‘onClick‘: function () {
                    console.log("onClick");
                }
            }
            return <input type="button" {...myAttr} value={this.props.name} /> // {...myAttr}绑定多个属性
            }
        })
    ReactDOM.render(<Info name="I AM A BUTTON" />,document.getElementById(‘box‘));

DEMO:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    <style>
        ul{margin:0;padding:0;}
        ul li{list-style: none;}
        .ul-box{margin-top:20px;}
        .ul-box li{margin-top:10px;}
        button{margin-left:10px;background: #f1f1f1;border:1px solid #e2e2e2;padding:6px 10px;}
        .input-txt{height: 27px;line-height: 27px;border:1px solid #e2e2e2;}
    </style>
</head>
<div id="container"></div>
<script type="text/jsx">
    // 增删改Demo
    // this.props.todo.map 循环
    var TodoList = React.createClass({
        // 初始化数据
        getInitialState:function(){
         return{
             todoList:[]
         }
        },
        // 更新数据
        changeHandle:function(rows){
            this.setState({
               todoList : rows
            })
        },
      render:function(){
          return(
                  <div>
                      <NewList onAdd={this.changeHandle} todo={this.state.todoList}/>
                      <ShowList onDel={this.changeHandle} todo={this.state.todoList} onSave={this.changeHandle}/>
                  </div>
          )
      }
    });

    // 新增
    var NewList = React.createClass({
        addHandle:function(e){
            e.preventDefault();
            // 从父组件获取数据 使用props
            var rows = this.props.todo;
          // 获取文本框的值
           var inputNew = this.refs.txtNewDate;
            var newData = inputNew.value.trim();
            if(newData != ""){
                // 追加到原来的数据中
                rows.push(newData);
                this.props.onAdd(rows);
            }
            inputNew.value = "";
                   },
        render:function(){
            return(
             <form onSubmit={this.addHandle}>
                 <input className="input-txt" type="text" placeholder="新增内容" ref="txtNewDate" id="txtNewDate"/>
                 <button onClick={this.addHandle}>新增</button>
             </form>
            )
        }
    })
    // 展示+修改+删除
    var ShowList = React.createClass({
        delHandle:function(e){
          // 获取要删除的索引
            var delIndex = e.target.getAttribute("data-key");
            this.props.todo.splice(delIndex,1);
            this.props.onDel(this.props.todo);
        },
        editHandle:function(e){
          // 将原本的值赋值到文本框
          // 将按钮文字改为保存
            var inputNew = document.getElementById("txtNewDate");
            //console.log(e.target.innerHTML)
            inputNew.value = e.target.getAttribute("data-item");
        },
        saveHandle:function(e){
            var saveIndex = e.target.getAttribute("data-key");
            var rows = this.props.todo;
            this.props.todo.map(function(item,i){
                if(i == saveIndex){
                    // 保存时存在相同id则删除原来的
                    rows.splice(saveIndex,1);
                }
            })
            var inputNew = document.getElementById("txtNewDate");
            var saveData = inputNew.value.trim();
            rows.push(saveData);
            this.props.onSave(rows);// 更新render
        },
        render:function(){
            return(
                    <ul className="ul-box">
                        {
                        // 循环li
                                this.props.todo.map(function(item,i){
                                    var id = "itemList";
                                   return(
                                           <li>
                                               <label data-id={id-i}>{item}</label>
                                               <button  data-key={i} onClick={this.delHandle}>删除</button>
                                               <button  data-key={i} data-item={item} onClick={this.editHandle}>修改</button>
                                               <button  data-key={i} onClick={this.saveHandle}>保存</button>
                                           </li>
                                   )
                                }.bind(this))
                        }
                    </ul>
            )

        }
    })
    ReactDOM.render(<TodoList/>,document.getElementById("container"));
</script>
</body>
</html>

View Code

学习参考：

http://www.ruanyifeng.com/blog/2015/03/react.html

https://www.cnblogs.com/wangfupeng1988/p/5302738.html

以上是关于React-学习总结的主要内容，如果未能解决你的问题，请参考以下文章

Python学习总结

React学习总结

已解决在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob(代码片段

线程学习知识点总结

[译] 如何在React中写出更优秀的代码