React：class和style绑定、ref、children、步进器

class和style绑定：

import React, { Component } from 'react';
import "./MyCom.css"

class MyCom extends Component {
    constructor(props){
        super(props)
        this.state = {
            a: 10,
            b: 19,
            txtColor: "#ff0000"
        }
    }
    render() {
      return (
        <div>
          {/* 在react中没有类似vue中的计算结果computed方法，如果需要计算一些复杂的逻辑，那么就封装成一个组件的方法 */}
          <p>求和：{this.sum()}</p>  {/* <p>求和：{this.sum()}</p> */}
          <p>素数：{this.isPrime(this.state.b)}</p>

          {/* style绑定 */}
          <input type="color" value={this.state.txtColor} onChange={e=>{this.setState({
              txtColor: e.target.value
          })}}/>
          <p style={{color: this.state.txtColor,backgroundColor:"green",fontSize:"20px"}}>在react中样式style可以绑定一个对象</p>
          <p style={this.pStyleObj()}>style也可以通过一个方法返回一个对象</p>

          {/* class绑定 */}
          <p className={["MyCom-border","MyCom-bgColor","MyCom-fSize"].join(" ")}>在react中class是不能直接绑定数组和对象的，最终需要拼接成一个字符串</p>
          <p className={this.join({"MyCom-border":true,"MyCom-bgColor":false,"MyCom-fSize":true}," ")}>在react中class是不能直接绑定数组和对象的，最终需要拼接成一个字符串</p>

          <p className={Math.random()>0.5?"MyCom-bgColor":"MyCom-fSize"}>对于控制一个标签是否用于某个class，可以通过三目运算</p>
        </div>
      );
    }

    sum = ()=>{
        // console.log(this);
        console.log("在这里可以做一些复杂逻辑的计算");
        return this.state.a + this.state.b;
    }

    isPrime(n){
        let flag = true;
        for(let i=2;i<n;i++){
            if(n%i === 0){
                flag = false;
                break;
            }
        }
        if (flag) {
            return "是";
        } else {
            return "不是";
        }
    }

    pStyleObj(){
        // 逻辑
        return {
            border: "2px solid " + this.state.txtColor
        }
    }

    // appendObjKey(obj){
    //     let styStr = "";
    //     for (let key in obj) {
    //         if (obj[key]) {
    //           styStr += key + " ";
    //         }
    //       }
    //     return styStr
    // }
}
  
export default MyCom;

设置class对象方法：（封装到index.js文件中）

// 放到组件原型中
React.Component.prototype.join = function(obj,sym){
  let styStr = "";
  for (let key in obj) {
    if (obj.hasOwnProperty(key)&&obj[key]) {
      styStr += key + sym;
    }
  }
  return styStr
}

自定义ref、children：

import React, { Component } from 'react';
import "./Second.css"
import Stepper from "../Stepper/Stepper"

class Second extends Component {
    constructor(props){
        super(props)
        // console.log(this.props);
        this.state = {
            count:0
        }
        // 在react中，也可以在组件中访问组件模板中的原生标签对象或者子组件对象。但是需要我们自己手动创建ref，然后在模板中对ref进行赋值。
        this.pRef1 = React.createRef();
        this.pRef2 = React.createRef();
    }
    render() {
      return (
        <div>
            <h1>这里是second组件</h1>
            <div>
                {/* react中没有插槽的概念，通过组件内容传递过来的数据保存在this.props.children属性中 */}
                {this.props.children}

                {/* 对ref进行赋值操作 */}
                <p ref={this.pRef1}>获取标签原生DOM对象</p>
                <p ref={this.pRef2}>使标签对象进入到组件对象中使用</p>

                {/* 使用步进器 */}
                <Stepper step={this.state.count} onChange={this.change}></Stepper>
            </div>
        </div>
      );
    }

    // componentWillMount(){
    //     将要渲染，还没渲染到页面中，还不能进行访问
    //     console.log(this.pRef1.current);
    // }

    componentDidMount(){
        console.log(this.pRef1.current);
        console.log(this.pRef2.current);
    }

    change = (n)=>{
        this.setState({
            count: n
        });
    }

}
  
export default Second;

步进器组件：（调用在上一个组件中）

import React, { Component } from 'react';
import "./Stepper.css"

class Stepper extends Component {
    constructor(props){
        super(props)
        this.state = {

        }
    }
    render() {
      return (
        <div>
            <button onClick={this.stepDown}>-</button>
            <input type="number" value={this.props.step} onChange={e=>{
                this.props.onChange(e.target.value);
            }}/>
            <button onClick={this.stepUp}>+</button>
        </div>
      );
    }

    // 在react中组件的状态（数据，传值）也遵循单向数据流传输。父组件可以将数据传递给子组件，子组件只能使用不能修改（this.props属性是read-only）。如果子组件想要修改这些数据，那么通知父组件来修改（使用这个子组件时通过属性传递进来一个或者若干个方法，在子组件进行回调）

    stepDown = ()=>{
        this.props.onChange(this.props.step-1);
    }

    stepUp = ()=>{
        this.props.onChange(this.props.step+1);
    }

}
  
export default Stepper;