我有一个包含对象的数组。我正在创建此数组的映射,以使用span组件呈现名称。
span
let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}];
我一直在使用以下两种不同的功能来迭代该对象数组,并使用map呈现JSX元素。
import React, { Component } from 'react'; class App extends Component { render() { let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}]; const items = data.map((key, i) => { return <span key={key.id}>{key.name}</span>; }); return ( <div> {items} </div> ); } } export default App;
import React, { Component } from 'react'; class App extends Component { render() { let data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}]; let rows = []; data.map((key, i) => { rows.push(<span key={key.id}>{key.name}</span>); }); return ( <div> {rows} </div> ); } } export default App;
我知道以上两种使用map和呈现JSX元素的方式。除了这两种以外,还有其他方法可以做到吗?如果是这样,推荐哪个?
map
通常,我遵循以下规则:
创建一个渲染项目的组件
// in some file export const RenderItems = ({data}) => { return data && data.map((d, i) => <span key={d.id}>{d.name}</span>) || null }
钩住RenderItems
import { RenderItems } from 'some-file' class App extends Component { render() { // you may also define data here instead of getting data from props const { data } = this.props return ( <div> <RenderItems data={data} /> </div> ) } }
将数据附加到组件中
const data = [{"id": "01", "name": "Hi"}, {"id": "02", "name": "Hello"}] <App data={data} />
即使使用第二个代码示例,遵循此规则也不会影响性能。将项目推入数组并渲染项目。因为,您不是直接在渲染钩子内部工作。始终注意渲染钩子不会直接在其中实现任何逻辑。
此外,我不会id仅使用键来创建:
id
const data = [{"name": "Hi"}, {"name": "Hello"}] //... and when using index as key .map((d, i) => <span key={'item-'+i}> // or, .map((d, i) => <span key={'item-'+i+'-'+d.name}>
请参阅这篇文章,为什么我在使用索引作为键时遵循这种语法。
如果要避免使用不必要的html标签,可以使用React.Fragment
export const RenderItems = ({data}) => { return data && data.map( (d, i) => <React.Fragment key={d.id}>{d.name}</React.Fragment> ) || null } // and when rendering, you just return the component return <RenderItems data={data} />
注意:
<></>
<React.Fragment></React.Fragment>
React.Fragment
使用示例<></>:
<>{d.name}</>
这将d.name在html中呈现为,而没有任何标签。当我们专门转换现有设计以响应应用程序时,这被认为是最好的。或者,可能还有其他情况。就像,我们将显示一个定义列表:
d.name
<dl> <dt></dt> <dd></dd> <dt></dt> <dd></dd> <dt></dd> </dl>
而且我们不想附加不必要的html标记,那么使用Fragment将使我们的生活更轻松:
例:
<> <dt>{d.term}</dt> <dd>{d.definition}</dd> </>
最重要的情况是td在tr(TR组件)中渲染元素。如果不这样做,那么我们就违反了HTML规则。该组件将无法正确渲染。在做出反应时,它将引发错误。
td
tr
另外,如果您的道具清单很长,如下所示:
const { items, id, imdbID, title, poster, getMovieInfo, addToFavorites, isOpen, toggleModal, closeModal, modalData, } = props
您可以考虑采用以下方式进行销毁:
const { items, ...other } = props // and in your component you can use like: <div modalData={other.modalData}>
但是,我个人更喜欢使用第一个示例代码。这是因为在开发过程中,我不需要每次都回顾其他组件或寻找控制台。在给定的示例中,有这样的键,modalData={}因此我们易于维护modalData={other.modalData}。但是,如果需要编写类似的代码<div>{modalData}</div>怎么办?然后,您也可以同意我的偏好。
modalData={}
modalData={other.modalData}
<div>{modalData}</div>