Question

我希望获得一些最佳实践/设计模式的建议，以用于将一个组件传递到另一个组件中。我的示例是，我有一个页面，其中包含一个列表组件，该组件遍历地图并呈现项目详细信息组件。我想重用此列表组件，但是当它在不同页面上时，将使用不同的项目明细组件呈现数据。一个要求是，子组件将列表项作为道具并呈现。

我的第二个问题是，此子组件具有一个用于删除自身的按钮。应该是从“页面”组件还是列表组件传入的回调函数？

Answer 1

如果物品详细信息组件在道具方面完全相同，那么最简单的方法就是将组件类型作为道具传递给列表。

关于第二个问题，没有黄金法则，这对于您的组件而言确实有意义。根据您的描述，听起来您的列表组件应该是container，并且应该管理删除操作（可能也包括加载操作），例如

const AnchorListItem = ({ onDelete, id, text }) => (
  <li>
    <a data-id={id} onClick={onDelete}>{text}</a>
  </li>
);
const ButtomListItem = ({ onDelete, id, text }) => (
  <li>
    <button data-id={id} onClick={onDelete}>{text}</button>
  </li>
);
class List extends React.Component {
  handleDeleteItem = e => {
    // Delete item (you can grab ID from e.target.dataset.id)
  }
  render() {
    const { data, component: Item } = this.props;
    const items = data.map((x, i) => <Item key={i} {...x} onDelete={handleDeleteItem} />);
    return <ul>{items}</ul>;
  }
};
const PageA = () => <List component={AnchorListItem} data={...} />;
const PageB = () => <List component={ButtonListItem} data={...} />;

Answer 2

对于问题的第一部分，我建议使用儿童道具（在官方文档中称为composition）。

例如

function MyPage () {
    return <MyList>
        <MyItem name='item1'/>
        <MyItem name='item2'/>
    </MyList>
}

MyList组件看起来像

function MyList (props) {
    return <div>This is list!
        {props.children}
    </div>
}

props.children将包含<MyList>和</MyList>标签之间的所有元素。（在上面的示例中，它们是<MyItem name='item1'/>和<MyItem name='item2'/>）。您还可以使用React.children从MyList组件中操纵儿童道具。

对于您问题的第二部分，一般状态为lifted up。在大多数情况下，这种方法会有所帮助。它应该移动多高取决于几个因素。例如，如果您要查询后端的列表项并将修改后的列表传递给后端，则可以在MyList组件中完成。但是，如果要在其他组件（例如左侧菜单）中使用列表项来显示收藏夹，则最好将状态提升到Page组件。

传递React组件的最佳方法？

2 个答案: