React 快速上手 - 05 组件渲染控制
目录
React 快速上手 - 05 组件渲染控制本质上讲,本章还是说 理论上来说,渲染分两种方式 目标掌握常见渲染控制
渲染控制1. 并列组件嵌套并行,这是非常常见的情况,特别是容器组件,后面会细说 代码 function UserView(props) { return <p>用户 xxx 你好,欢迎回来!</p> } function GuestView(props) { return <p>游客你好, 注册 | 登陆。</p> } function RenderView() { return ( <div> <UserView /> <GuestView /> </div> ) } 输出
codepen https://codepen.io/ducafecat/... 2. 条件判断代码 // 显示组件 function UserView(props) { return <p>用户 xxx 你好,欢迎回来!</p> } function GuestView(props) { return <p>游客你好, 注册 | 登陆。</p> } // 条件判断 function ConditionView(props) { return <div>{props.isLogin && <UserView />}</div> } // 容器 function RenderView() { return ( <div> <ConditionView isLogin /> </div> ) }
条件控制中间用
大家可以动手改下看看 <ConditionView isLogin={false} /> 输出
codepen https://codepen.io/ducafecat/... 3. 三目运算代码 // 显示组件 function UserView(props) { return <p>用户 xxx 你好,欢迎回来!</p> } function GuestView(props) { return <p>游客你好, 注册 | 登陆。</p> } // 三目运算 function InlineIfElseView(props) { return <div>{props.isLogin === true ? <UserView /> : <GuestView />}</div> } // 容器 function RenderView() { return ( <div> <InlineIfElseView isLogin={false} /> </div> ) }
输出
codepen https://codepen.io/ducafecat/... 4. 循环代码 // 数据 let blogs = [ { title: 'React v16.3.0: New lifecycles and context API',url: 'https://reactjs.org/blog/2018/03/29/react-v-16-3.html',by: 'Brian Vaughn' },... ] // 循环 function ListsView(props) { let datas = props.data return ( <ol> {datas.map((item,index) => ( <li key={index.toString()}> <a href={item.url} target="_blank"> {item.title} </a>{' '} --- <small>by {item.by}</small> </li> ))} </ol> ) } // 容器 function RenderView() { return ( <div> <ListsView data={blogs} /> </div> ) } 表达式用的 输出
codepen https://codepen.io/ducafecat/... 5. 嵌套循环代码 // 数据 let blogs = [ { title: 'React v16.3.0: New lifecycles and context API',... ] let types = ['推荐','热门','最新'] // 嵌套循环 function NestListsView(props) { let datas = props.data let types = props.types return ( <ul> {types.map((item,index) => ( <li key={index.toString()}> {item} <ol> {datas.map((item,index) => ( <li key={index.toString()}> <a href={item.url} target="_blank"> {item.title} </a>{' '} --- <small>by {item.by}</small> </li> ))} </ol> </li> ))} </ul> ) } // 容器 function RenderView() { return ( <div> <NestListsView types={types} data={blogs} /> </div> ) } 第二层在 输出
codepen https://codepen.io/ducafecat/... 虽然上面代码能运行,一旦代码复杂了,是不适合阅读和维护的,我们需要把 代码 function ListsView(props) { let datas = props.data return ( <ol> {datas.map((item,index) => ( <li key={index.toString()}> {item.title} </li> ))} </ol> ) } function NestListsView(props) { let datas = props.data let types = props.types return ( <ul> {types.map((item,index) => ( <li key={index.toString()}> {item} <ol> <ListsView data={datas}> </ol> </li> ))} </ul> ) }
6. 空组件代码 // 空组件 function NullView(props) { let isNull = props.isNull if (isNull) { return null } return <div>组件123</div> } // 容器 function RenderView() { return ( <div> <NullView isNull /> </div> ) }
这个空组件的作用 就是用来阻止显示,比如这里
输出
codepen https://codepen.io/ducafecat/... 7. ref引用代码 // ref引用 class RefInputView extends Component { constructor(props) { super(props) this.inputRef = React.createRef() } render() { return <input type="text" ref={this.inputRef} /> } componentDidMount() { this.inputRef.current.focus() this.inputRef.current.value = '123' } } // 容器 function RenderView() { return ( <div> <RefInputView /> </div> ) }
输出
codepen https://codepen.io/ducafecat/... 8.
|
参数 | 说明 |
---|---|
type | html 标签名称,默认 input |
props | 组件属性 |
children | 组件内容、子节点 |
代码
// 代码 function CreateElement(props) { let toWhat = props.toWhat let ele = React.createElement('div',null,`Hello ${toWhat}`) return ele } // 容器 function RenderView() { return ( <div> <CreateElement toWhat="你好" /> </div> ) }
输出
codepen
https://codepen.io/ducafecat/...
代码
- reactjs-example / 3-render.js
参考文
- Rendering Elements
- Conditional Rendering
- JSX In Depth
- Refs and the DOM
- React Without JSX
(编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!