react框架
m0_59381867
这个作者很懒,什么都没留下…
展开
-
React组件深入props
// children属性 文本节点// const App = props => {// console.log(props);// return (// <div>// <h1>组件标签的子节点:</h1>// {props.children}// </div>// )// }// reactDom.render(<App>我是子节点</App>,document.getEl.原创 2021-12-02 10:13:30 · 758 阅读 · 0 评论 -
React组件的Context,跨组件传递数据
// 创建context得到两个组件const {Provider,Consumer} =React.createContext()class App extends React.Component{ render () { return ( <Provider value="pink"> <div> <Node /> </div> </Provider> ) }}const No.原创 2021-12-01 17:18:41 · 723 阅读 · 0 评论 -
组件之间的通讯,props
组件的props 接受传递给组件的数据// 组件的props// 函数组件接收数据// const Hello = (props) => {// // props是一个对象// console.log(props);// return (// <div>// <h1>props:{ props.name }</h1>// </div>// )// }// // 传递数据// 类组件传递..原创 2021-11-30 10:39:08 · 314 阅读 · 0 评论 -
React表单处理
1.受控组件// 受控组件class App extends React.Component { state = { txt:'' } handleChange = (e) => { this.setState({ txt:e.target.value }) } render () { return ( <input type="text" value={this.state.txt} onChange={this.handleChange}>原创 2021-11-23 16:46:11 · 282 阅读 · 0 评论 -
React组件
使用react就是在使用组件1.函数创建组件 函数名开头字母必须大写 ,函数组件必须有返回值// 函数组件// function Hello () {// return (// <div>这是第一个函数组件</div>// )// }const Hello=()=> <div>这是第一个函数组件</div>ReactDOM.render(<Hello/>,document.getElementById(..原创 2021-11-18 14:37:08 · 236 阅读 · 0 评论 -
React中JSX的使用
1.使用jsx创建react元素2.使用ReactDOM.render()方法渲染元素// 创建react元素const title = <h1>hello jsx <span>这是span</span> </h1>// 渲染react元素ReactDOM.render(title,document.getElementById('root'))3.推荐使用()小括号包裹jsx代码4.嵌入js表达试 使用单大括号{ }...原创 2021-11-18 10:56:15 · 923 阅读 · 0 评论 -
react脚手架的使用
开源一次,随处使用,开源即用无需配置1.初始化项目 npxreact-app 项目名字2. 启动项目 npm start3. index.js文件夹中导入 react 和 react-dom 两个包import React from 'react'import ReactDOM from 'react-dom'4.创建react元素和渲染react元素React.createElement()方法,用来创建元素ReactDOM.redder()方法用来渲染元素//...原创 2021-11-18 09:26:04 · 421 阅读 · 0 评论