Question

React中的新功能，在给定嵌套props对象的情况下，寻找构建一组嵌套组件的好方法。

采用以下基本props示例：

const props = [{
  label: 'Foods',
  children: [
    { label: 'Chicken', children: [] },
    { label: 'Pasta', children: [] }
  ]
}];

我想用它来构建一个嵌套菜单：

<Item>
  <Label>Foods</Label>
  <Item><Label>Chicken</Label></Item>
  <Item><Label>Pasta</Label></Item>
</Item>

虽然这是一个简单的例子，但嵌套会更深入。

我一直在寻找这个，我发现的都是预构建的组件。我不是在寻找魔法，我试图在使用其他组件之前了解其工作原理。

生成React组件以有效呈现此内容的最佳方法是什么？

Answer 1

您可以让组件呈现自己。这是一个应该有效的纯组件示例：

const Item = ({label, children}) => (
  <div>
    <label>{label}</label>
    {children.map(child => (
      <Item label={child.label} children={child.children} />
    ))}
  </div>
);

Answer 2

只要添加奥斯汀的答案，根据需要拥有尽可能多的孩子可能是迭代的。

var Container = React.createClass({
    render: function () {
        var Items = [];
        var level = 1;
        var self = this;

        var addItem= function (filter, level) {
            filter.forEach((f)=> {

                Items.push(<Item key={f.Id} data={f} level={level} />)

                if (f.Children !== undefined && f.Children.length != 0) {
                    addFiler(f.Children, level + 1);
                }
            });
            level -= 1;
        };

        addItem(this.props.options, level);

        return (<div>{Items}</div>);
    }
});

var Item= React.createClass({
    displayName: 'filter',
    onClick: function (e) {
        this.props.onChange(this.props.data.Id);
    },

    render: function () {
        return (<div>
                <label>
                    {this.props.data.Title}
                </label>
       </div>);
    }
});

在React中构建嵌套组件

2 个答案: