React Map json数据并创建一个下拉列表

Question

我将json数据作为道具从Redux商店传递，json具有以下格式：

.write

我需要拆分标签部分并从数据创建嵌套菜单，如下所示：

{ 
    "label1.label2.label3": {
        "option1":[
        ],
        "option2": "value",
        "option3": [
        ],
        ...
    }
    ...
}

我无法弄清楚如何映射到数据，我的组件代码如下所示：

  label1
       label2
            label3
                option1
                    value of option1
                option2
                    value of option2
                option3
  ...

Answer 1

我真的很接近这一点。尽管如此，实现嵌套是非常棘手的。

＆＃13;

＆＃13;

const data = { 
    "label1.label2.label3": {
        "option1":"value1",
        "option2": "value2",
        "option3": "value3"
    },
    "label1.label2.label3.label4": {
        "option1":"value1",
        "option2": "value2"
    },
}

class App extends React.Component {

  createMenu = () => {
  
    const options = Object.keys(data).reduce( (options, key, i) => {
      
      const d = data[key];
      
      let levels = key.split('.').map( (label, i) => {
        return {
          label: label,
          options: []
        };
      });
      
      levels[levels.length -1].options = Object.keys(d).map( option => {
        return {
          label: option,
          value: d[option]
        }
      });
      
      options.push(levels);
      
      return options;
    }, []);
    
    const mapOptions = o => {
    
      let menu = [];
      o.forEach( (option, i) => {
      
        if(!option.options.length) {
          // Nest next option
          menu.push(
            <li>
              {option.label}
            </li>
          );
        }else {
          // display options
          menu.push(
            <li>
              {option.label}
                {option.options.map( nested => {
                  return <li>{nested.label}: {nested.value}</li>
                })}
            </li>
          );
        }
      
      });
   
    return menu;
      
    };
  
    return options.map( option => {
      return mapOptions(option);
    });
    
  };

  render() {
    return (
      <div>
        {this.createMenu()}
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

＆＃13;

li li {
  margin-left: 15px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

＆＃13;

＆＃13;

＆＃13;