Question

我正在尝试在React中实现一个描述列表，如下所示。我想要添加的一个要求是允许它是递归的。以下是如何使用它的示例。

<DescriptionList>
    <DescriptionListItem key="1" term="First Name" description="Ryan" />
    <DescriptionListItem key="2" term="Last Name" description="Me" />
    <DescriptionListItem key="3" term="Email" description="emample@mail.com" />
    <DescriptionList>
      <DescriptionListItem key="1" term="term1" description="value 1" />
      <DescriptionListItem key="2" term="term2" description="value 2" />
      <DescriptionListItem key="3" term="term3" description="value 3" />
    </DescriptionList>
</DescriptionList>

我想使用类似html definition list

的内容

import React, { Component, PropTypes } from 'react';
import createFragment from 'react-addons-create-fragment';

class DescriptionList extends Component {
  render() {
    console.log(this.props.children);
    return (
      <dl className="row">
        {this.props.children.map(child => createDescriptionListItemFragment(child))}
      </dl>
    );
  }
}

function createDescriptionListItemFragment({props}) {
  let fragment = {};
  fragment.term = <dt>{props.term}</dt>;
  fragment.description = <dd>{props.description}</dd>;
  fragment = createFragment(fragment);
  return fragment;
}

DescriptionList.propTypes = {
  children: PropTypes.array.isRequired
};

export default DescriptionList;

以上是第一轮实施。我希望将DescriptionListItem提取到它自己的组件中并处理那里的DescriptionListItem逻辑。因为createFragment返回一个ReactElements数组，所以我只设法让所有东西都在单个组件中运行。看来你不能将片段作为反应组件返回。我无法将片段包装在div中，因为它需要位于dl内。

我是如何将逻辑提取到自己的组件中的？

Answer 1

有什么想法可以将逻辑提取到它自己的组件中吗？

在React库的版本 <16.2.0 中不存在。
在16.2.0中，增加了对片段的支持。

不过，可以按以下方式重构DescriptionListItem中当前createDescriptionListItemFragment的逻辑。

const DescriptionListItem = ({props}, index) => {
  const {term, description} = props;
  return [ 
     <dt key={`${term}-${index}`}>{term}</dt>,
     <dd key={`${description}-${index}`}>{description}</dd>
  ];
}

DescriptionListItem是一个返回片段的函数，因此可以作为映射器传递。

class DescriptionList extends React.Component {
  render() {
    return (
      <dl className="row">
        {this.props.children.map(DescriptionListItem)}
      </dl>
    );
  }
}

如何将反应片段提取到其自身的组件中？

1 个答案: