React实例 列表组件

新建组件

现在SRC的目录下面,新建一个文件Xiaojiejie.js文件,然后写一个基本的HTML结构。代码如下:

import React,{Component} from 'react'

class Xiaojiejie extends Component{
    render(){
        return  (
            <div>
               <div><input /> <button> 增加服务 </button></div>
               <ul>
                   <li>头部按摩</li>
                   <li>精油推背</li>
               </ul> 
            </div>
        )
    }
}
export default Xiaojiejie 

这个文件现在还没有什么功能,只是写完了一个小组件。然后我们把入口文件的组件换成Xiajiejie组件。

组件外层包裹原则

这是一个很重要的原则,比如上面的代码,我们去掉最外层的< div >,就回报错,因为React要求必须在一个组件的最外层进行包裹。

Fragment标签

加上最外层的DIV,组件就是完全正常的,但是你的布局就偏不需要这个最外层的标签怎么办?比如我们在作Flex布局的时候,外层还真的不能有包裹元素。这种矛盾其实React16已经有所考虑了,为我们准备了< Fragment >标签。

要想使用< Fragment >,需要先进行引入。

import React,{Component,Fragment } from 'react'

然后把最外层的

标签,换成< Fragment >标签,代码如下。

import React,{Component,Fragment } from 'react'

class Xiaojiejie extends Component{
    render(){
        return  (
            <Fragment>
               <div><input /> <button> 增加服务 </button></div>
               <ul>
                   <li>头部按摩</li>
                   <li>精油推背</li>
               </ul> 
            </Fragment>
        )
    }
}
export default Xiaojiejie 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,下面我举一个简单的例子来说明 React 组件间传值的实现。 假设我们有两个组件:`Parent` 和 `Child`,`Parent` 组件中有一个状态 `count`,`Child` 组件需要获取这个状态并显示在页面上。 1. 通过 props 传值: ```jsx // Parent.jsx import React, { useState } from 'react'; import Child from './Child'; function Parent() { const [count, setCount] = useState(0); return ( <div> <h1>Parent Component</h1> <p>Count: {count}</p> <Child count={count} /> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Parent; // Child.jsx import React from 'react'; function Child(props) { return ( <div> <h2>Child Component</h2> <p>Count: {props.count}</p> </div> ); } export default Child; ``` 2. 通过 context 传值: ```jsx // Parent.jsx import React, { useState, createContext } from 'react'; import Child from './Child'; export const CountContext = createContext(); function Parent() { const [count, setCount] = useState(0); return ( <div> <h1>Parent Component</h1> <p>Count: {count}</p> <CountContext.Provider value={count}> <Child /> </CountContext.Provider> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } export default Parent; // Child.jsx import React, { useContext } from 'react'; import { CountContext } from './Parent'; function Child() { const count = useContext(CountContext); return ( <div> <h2>Child Component</h2> <p>Count: {count}</p> </div> ); } export default Child; ``` 3. 通过 Redux 传值: ```jsx // store.js import { createStore } from 'redux'; const initialState = { count: 0, }; function reducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; default: return state; } } const store = createStore(reducer); export default store; // Parent.jsx import React from 'react'; import { connect } from 'react-redux'; function Parent(props) { const { count, dispatch } = props; return ( <div> <h1>Parent Component</h1> <p>Count: {count}</p> <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button> </div> ); } function mapStateToProps(state) { return { count: state.count, }; } export default connect(mapStateToProps)(Parent); // Child.jsx import React from 'react'; import { connect } from 'react-redux'; function Child(props) { const { count } = props; return ( <div> <h2>Child Component</h2> <p>Count: {count}</p> </div> ); } function mapStateToProps(state) { return { count: state.count, }; } export default connect(mapStateToProps)(Child); ``` 以上三种方式都可以实现组件间传值,具体使用哪种方式取决于应用的需求和复杂度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jason–json

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值