react
gzxiaomei
这个作者很懒,什么都没留下…
展开
-
React 条件渲染用法
React 中的条件渲染和 JavaScript 中的一致,使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素,然后让 React 根据它们来更新 UI。1,元素变量你可以使用变量来储存元素。它可以帮助你有条件的渲染组件的一部分,而输出的其他部分不会更改。在下面的例子中,我们将要创建一个名为 LoginControl 的有状态的组件。它会根据当前的状态来渲染 <LoginButton /> 或 <LogoutButton />,它也将渲染前面原创 2020-10-17 17:39:30 · 1455 阅读 · 0 评论 -
第五天学习React Props用法
使用 Props以下实例演示了如何在组件中使用 props:React 实例function HelloMessage(props) { return <h1>Hello {props.name}!</h1>;}const element = <HelloMessage name="Runoob"/>;ReactDOM.render( element, document.getElementById('example'));...原创 2020-10-16 16:28:55 · 70 阅读 · 0 评论 -
第四天React 组件用法
1,函数定义组件function HelloMessage(props) { return <h1>www.djznrobot.com</h1>;}你也可以使用 ES6 class 来定义一个组件:class Welcome extends React.Component { render() { return <h1>www.djznrobot.com</h1>; }}2、const element = <Hel...原创 2020-10-16 16:22:15 · 117 阅读 · 0 评论 -
第三天学习React JSX
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。1,使用 JSXJSX 看起来类似 HTML ,我们可以看下实例:ReactDOM.render( <h1>www.djznrobot.com</h1>, document.getElementById('example'));我们可以在以上代码中嵌套多个 HTML 标签,需要使用一个 div 元素包裹它,实例中的 p ...原创 2020-10-16 16:18:28 · 92 阅读 · 0 评论 -
第二天学习React元素渲染
1,将元素渲染到 DOM 中首先我们在一个 HTML 页面中添加一个 id="example" 的 <div>:<div id="example"></div>在此 div 中的所有内容都将由 React DOM 来管理,所以我们将其称为 "根" DOM 节点。我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话,你可能会需要在不同的部分单独定义 React 根节点。要将React元素渲染到根DOM节原创 2020-10-16 16:15:01 · 251 阅读 · 1 评论 -
第一天学React安装和实例
1,React 安装官方提供的 CDN 地址:<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script><!-- 生产环境中不建议使用 --><script src="htt原创 2020-10-16 16:11:21 · 116 阅读 · 0 评论