关于react.js:react组件三大核心属性statepropsrefs

59次阅读

共计 2571 个字符，预计需要花费 7 分钟才能阅读完成。

`1、state`

state是组件对象中十分重要的属性，值以对象的模式进行存储。

通过 state 更改，从而更新页面显示的内容。

组件中 render 办法中的 this 指向实例对象，调用了 1+n 次，其中 1 是初始时调用。

state扭转状态不能间接批改，要通过 setState() 进行状态变更。

初始化 state

state = {isHot: false,};

render 渲染

事件绑定须要用onClick

render() {
    return (<h1 onClick={this.changeWeater}>
            今天天气很{this.state.isHot ? "酷热" : "凉快"}
        </h1>
    );
}

setState 批改值

组件自定义的办法中 this 为undefined，如何解决？
1、强制绑定 this: 通过函数对象的bind()
2、箭头函数

changeWeater = () => {console.log("此处批改 isHot 的值", this);
    this.setState({isHot: !this.state.isHot,});
}

整体代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>state 的简写形式 </title>
</head>

<body>
    <div id="test"></div>
    <!-- 引入 react 外围库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 反对 react 对 dom 进行操作 -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将 jsx 转为 js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">
        class Weater extends React.Component {
            // 初始化状态
            state = {isHot: false,};
            // 自定义办法，用赋值语句的模式 + 箭头函数
            changeWeater = () => {console.log("此处批改 isHot 的值", this);
                this.setState({isHot: !this.state.isHot,});
            }
            render() {console.log(this);
                return (<h1 onClick={this.changeWeater}>
                        今天天气很{this.state.isHot ? "酷热" : "凉快"}
                    </h1>
                );
            }
        }
        ReactDOM.render(<Weater />, document.getElementById("test"));
    </script>
</body>
</html>

`2、props`

props属性是只读的，不能对他进行批改。

通过 Person.propTypes/static propTypes 对标签属性进行类型、必要性限度，其中 Person 为class类。

通过 Person.defaultProps/static defaultPropTypes 设置属性默认值

const p = {name: "tom"}; <Person {...p}, 通过 {...p} 进行传值

// 对标签属性进行类型、必要性限度
Person.propTypes={
    name:PropTypes.string.isRequired,// 限度 name 为字符串，必填
    sex:PropTypes.string,
    age:PropTypes.number,
    speak:PropTypes.func// 限度 speak 为函数
}
// 指定默认属性值
Person.defaultProps={
    sex:'男',
    age:14
}


class Person extends React.Component {constructor(props) {super(props)
        console.log(props)
    }
    render() {console.log(this)
        // props 是只读的
        return (
            <ul>
                <li> 姓名：{this.props.name}</li>
                <li> 年龄：{this.props.age}</li>
                <li> 性别：{this.props.sex}</li>
            </ul>
        );
    }
    // 对标签属性进行类型、必要性限度
    static propTypes = {
        name: PropTypes.string.isRequired,// 限度 name 为字符串，必填
        sex: PropTypes.string,
        age: PropTypes.number,
    }
    // 指定默认属性值
    static defaultProps = {
        sex: '男',
        age: 14
    }
}
const p = {name: "tom"}
ReactDOM.render(<Person {...p} />, document.getElementById("test"));

`3、refs`

1、字符串模式

<input ref="input1" type="text" placeholder="点击按钮提醒数据" />

// 获取数据
this.refs.input1.value

2、回调模式

<input ref={c => { this.input1 = c}} type="text" placeholder="点击按钮提醒数据" />

// 获取数据
this.input1.value

3、createRef 的应用

// react.createRef 被调用后，会返回一个容器，该容器能够存储被 Ref 标识的节点, 该容器专人专用
myRef = React.createRef()
<input ref={this.myRef} type="text" placeholder="点击按钮提醒数据" />

// 获取数据
this.myRef.current.value

正文完