为了账号安全,请及时绑定邮箱和手机立即绑定

react map用什么办法能取出index

react map用什么办法能取出index

噜噜哒 2019-07-26 19:15:05
react map用什么办法能取出index
查看完整描述

3 回答

?
明月笑刀无情

TA贡献1828条经验 获得超4个赞

说说React

一个组件,有自己的结构,有自己的逻辑,有自己的样式,会依赖一些资源,会依赖某些其他组件。比如日常写一个组件,比较常规的方式:

- 通过前端模板引擎定义结构

- JS文件中写自己的逻辑

- CSS中写组件的样式

- 通过RequireJS、SeaJS这样的库来解决模块之间的相互依赖,

那么在React中是什么样子呢?

结构和逻辑

在React的世界里,结构和逻辑交由JSX文件组织,React将模板内嵌到逻辑内部,实现了一个JS代码和HTML混合的JSX。

结构

在JSX文件中,可以直接通过 React.createClass 来定义组件:

var CustomComponent = React.creatClass({
render: function(){
return (<div className="custom-component"></div>);
}
});

通过这种方式可以很方便的定义一个组件,组件的结构定义在render函数中,但这并不是简单的模板引擎,我们可以通过js方便、直观的操控组件结构,比如我想给组件增加几个节点:

var CustomComponent = React.creatClass({
render: function(){
var $nodes = ['h','e','l','l','o'].map(function(str){
return (<span>{str}</span>);
});
return (<div className="custom-component">{$nodes}</div>);
}
});

通过这种方式,React使得组件拥有灵活的结构。那么React又是如何处理逻辑的呢?

逻辑

写过前端组件的人都知道,组件通常首先需要相应自身DOM事件,做一些处理。必要时候还需要暴露一些外部接口,那么React组件要怎么做到这两点呢?

事件响应

比如我有个按钮组件,点击之后需要做一些处理逻辑,那么React组件大致上长这样:

var ButtonComponent = React.createClass({
render: function(){
return (<button>屠龙宝刀,点击就送</button>);
}
});

 



查看完整回答
反对 回复 2019-07-28
?
慕的地6264312

TA贡献1817条经验 获得超6个赞

const bordercolors=["red", "blue", "yellow"]
{bordercolors.map((value, index)=>
<option key={index}>{index}:{value}</option>
)}

查看完整回答
反对 回复 2019-07-28
?
POPMUISE

TA贡献1765条经验 获得超5个赞

eact refs 可以接受一个字符串对象吗 处理 React 组件之间的交流方式,主要取决于组件之间的关系,然而这些关系的约定人就是你。我不会讲太多关于 data-stores、data-adapters 或者 data-helpers 之类的话题。我下面只专注于 React 组件本身的

查看完整回答
反对 回复 2019-07-28
  • 3 回答
  • 0 关注
  • 638 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信