React进行组件开发步骤详解

来源：动视网责编：小采时间：2020-11-27 19:47:02

React进行组件开发步骤详解

React进行组件开发步骤详解:这次给大家带来React进行组件开发步骤详解，React进行组件开发的注意事项有哪些，下面就是实战案例，一起来看一下。目标了解组件设计几个参考点:组件拆封原则组件间通讯双向绑定1. 组件设计1.1 按有无状态管理可以分为有状态组件无状态组件图解说明1.1

推荐度：

点击下载本文 文档为doc格式

导读React进行组件开发步骤详解:这次给大家带来React进行组件开发步骤详解，React进行组件开发的注意事项有哪些，下面就是实战案例，一起来看一下。目标了解组件设计几个参考点:组件拆封原则组件间通讯双向绑定1. 组件设计1.1 按有无状态管理可以分为有状态组件无状态组件图解说明1.1

2. 组件间通讯

其实就是在一个容器组件上，摆放了一个 控制组件 和一个 展示组件

图解说明

组件间通讯

我们动手写一下

第一步: 编写输入组件

代码

function InputView(props) {
 return (
 <p>
 <input
 type="text"
 onKeyDown={props.onChange}
 placeholder="输入 ...... ?"
 />
 </p>
 )
}

处理 onKeyDown 消息，返回给父容器

第二步: 编写列表展示组件

代码

function ListView(props) {
 return (
 <ol>
 {props.datas &&
 props.datas.map((item, index) => (
 <li key={index.toString()}>{item}</li>
 ))}
 </ol>
 )
}

map 循环打印数据列表

第三步: 容器组件绑定状态、事件

代码

class ContainerView extends Component {
 constructor(props) {
 super(props)
 this.state = {list: []}
 this.handleChange = this.handleChange.bind(this)
 }
 handleChange(e) {
 if (e.keyCode === 13) {
 const value = e.target.value
 e.target.value = ''
 this.setState((state, props) => {
 let list = state.list
 list.push(value)
 return {list}
 })
 }
 }
 render() {
 return (
 <p>
 <InputView onChange={this.handleChange} />
 <ListView datas={this.state.list} />
 </p>
 )
 }
}

e.keyCode === 13 表示一直监控到输入回车，开始更新状态

动图效果

组件间通讯

codepen

https://codepen.io/ducafecat/...

3. 数据双向绑定

这个例子加入数据双向绑定功能，这在表单操作中用的很频繁

图解说明

数据双向绑定

还是用代码说明

3.1 第一步：输入组件

代码

class InputView extends Component {
 constructor(props) {
 super(props)
 this.form = props.form // 父容器 state.form
 this.sync = props.sync // 父容器 sync
 this.handleChange = this.handleChange.bind(this)
 }
 handleChange(e) {
 let name = e.target.attributes.name.value
 let value = e.target.value
 this.sync({name, value})
 }
 render() {
 return (
 <ul>
 <li>
 <input
 name="input"
 type="text"
 value={this.form.input}
 onChange={this.handleChange}
 />
 </li>
 <li>
 <textarea
 name="textarea"
 value={this.form.textarea}
 onChange={this.handleChange}
 />
 </li>
 <li>
 <select
 name="select"
 value={this.form.select}
 onChange={this.handleChange}
 >
 <option value="">---</option>
 <option value="grapefruit">Grapefruit</option>
 <option value="lime">Lime</option>
 <option value="coconut">Coconut</option>
 <option value="mango">Mango</option>
 </select>
 </li>
 </ul>
 )
 }
}

props.form 是容器传入的表单数据，结构如下

{
 input: '',
 textarea: '',
 select: ''
}

按控件名称 key / val 结构

props.sync 是回传父容器的事件，相应代码如下

 handleChange(e) {
 let name = e.target.attributes.name.value
 let value = e.target.value
 this.sync({name, value})
 }

可以发现回传的是 {控件名, 控件值}，这里是简写（键、值名相同时可以写一个），完整格式是

{
 name: name,
 value: value
}

3.2 第二步：展示组件

代码

function ListView(props) {
 let form = props.form
 let list = []
 for (let key in form) {
 list.push({
 key,
 value: form[key]
 })
 }
 return (
 <ul>
 {list &&
 list.map((item, index) => (
 <li key={index.toString()}>
 {item.key} - {item.value}
 </li>
 ))}
 </ul>
 )
}

这里做展示就简单了，接收到属性 form 后，格式化成数组 list ，然后 map 打印

3.3 第三步：容器组件

代码

class ContainerView extends Component {
 constructor(props) {
 super(props)
 this.state = {form: {input: '', textarea: '', select: ''}}
 this.handleSync = this.handleSync.bind(this)
 }
 handleSync(item) {
 this.setState((prevState, props) => {
 let form = prevState.form
 form[item.name] = item.value
 return {form}
 })
 }
 render() {
 return (
 <p>
 <InputView sync={this.handleSync} form={this.state.form} />
 <ListView form={this.state.form} />
 </p>
 )
 }
}

handleSync 中 form[item.name] = item.value 动态更新 key / value 达到更新 state

动图效果