如何在React JS状态下渲染元素?

时间:2018-05-23 04:45:30

标签: javascript node.js reactjs

我现在有麻烦将html标签呈现在状态内。当我添加' div dangerouslySetInnerHTML = {{__ html:this.state.actions}}时似乎无法解决,因为我会在li标签中呈现菜单

SELECT DISTINCT Id, AppName
FROM "macanta_user_track_records" as a
JOIN (
 SELECT AppName
   FROM "macanta_user_track_records"
   WHERE "LoginDate" >= '2018-04-01' AND "LoginDate" <= '2018-04-30' // To reduce number of rows,otherwise WHERE is not necessary
  GROUP BY AppName
  HAVING count(AppName) >= 5    
) as b ON b.AppName = a.AppName
WHERE "LoginDate" >= '2018-04-01' AND "LoginDate" <= '2018-04-30' 
ORDER BY AppName

//应该发生的是创建一个新列表

  • [object Object]
  • 2 个答案:

    答案 0 :(得分:1)

    您可以在不使用dangerouslySetInnerHTML的情况下使其正常工作。这是使用&lt; ul&gt;的示例。和&lt; li&gt;的数组您可以直接在React中呈现的标记。

    class App extends Component {
    
    constructor(props) {
        super(props);
    
        this.state = {
          list: ["list 1", "list 2", "list 3"]
        };
      }
    
      render() {
        return (
          <div>
            <ul>
                {this.state.list.map((obj, index) => <li key={index}>{obj}</li> )}
            </ul>
          </div>
        );
      }
    }
    

    答案 1 :(得分:0)

    喜欢这段代码

    import React, { Component } from 'react'
    import { Route, NavLink, Link } from 'react-router-dom'
    import ReactTimeout from 'react-timeout'
    class Menu extends Component {
    constructor() {
        super();
        this.state = {
            menuBar: [],
            sideBar: []
        }
    }
    async componentDidMount() {
        const res = await fetch('http://localhost:3001/api/menu/' + 18)
        const something = await res.json()
        this.setState({ menuBar: something })
        console.log(this.state.menuBar)
        let menuBar = this.state.menuBar
        let html = "";
        let link_menu = []
        for (var i = 0; i < menuBar.length; i++) {
            if (menuBar.menu_url == 'dashboard' || menuBar.menu_flag_link === 1) {
                var span_selected = ''
            } else {
                var span_selected = 'arrow'
            }
            if (menuBar.menu_flag_link == 0) {
                var title_menu = menuBar[i].menu_title
                link_menu =
                    <NavLink
                        to='javascript:;'
                        exact>title_menu</NavLink>
            } else {
                var title_menu = menuBar[i].menu_title
                link_menu = <NavLink
                    to="/"
                    exact>title_menu</NavLink>
            }
            html += '<li>' + link_menu
            if (menuBar[i].child.length > 0) {
                html += "<ul class='sub-menu'>"
                for (var j = 0; j < menuBar[i].child.length; j++) {
                    if (menuBar[j].child.menu_flag_link == 0) {
                        var link_menu2 = <NavLink
                            to='javascript:;'
                            exact>menuBar.child.menu_title</NavLink>
                    } else {
                        var link_menu2 =
                            <NavLink
                                to="/"
                                exact>menuBar.child.menu_title</NavLink>
                    }
                    html += "<li>, ${link_menu2}"
                    if (menuBar[i].child[j].length > 0) {
                        html += "<ul class='sub-menu'>"
                        for (var kjh = 0; kjh < menuBar[i].child[j].length; kjh++) {
                            var link_menu3 =
                                <NavLink
                                    to="/"
                                    exact>menuBar.child.menu_title</NavLink>
                            html += '<li> ${link_menu3} </li>'
                        }
                        html += '</ul>'
                    }
                    html += '</li>'
                }
                html += '</ul>'
            }
            html += '</li>'
        }
        this.setState({ sideBar: html })
    }
    render() {
        let menuBar = this.state.menuBar
        let sideBar = this.state.sideBar
        // console.log(sideBar)
        return (
            <div class="page-sidebar-wrapper">
                <div class="page-sidebar navbar-collapse collapse">
                    <ul class="page-sidebar-menu page-sidebar-menu-light" data-keep-expanded="true" data-auto-scroll="true" data-slide-speed="200">
                        <li class="sidebar-toggler-wrapper">
                            <div class="sidebar-toggler">
                            </div>
                        </li>
                        <li class="sidebar-search-wrapper">
                            <form class="sidebar-search " action="extra_search.html" method="POST">
                                <a href="javascript:;" class="remove">
                                    <i class="icon-close"></i>
                                </a>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Search..." />
                                    <span class="input-group-btn">
                                        <a href="javascript:;" class="btn submit"><i class="icon-magnifier"></i></a>
                                    </span>
                                </div>
                            </form>
                        </li>
                        <li class="start active open">
                            <a href="javascript:;">
                                <i class="icon-home"></i>
                                <span class="title">Dashboard</span>
                                <span class="selected"></span>
                                <span class="arrow open"></span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <NavLink
                                        to="/"
                                        exact>Home</NavLink>
                                </li>
                                <li class="active">
                                    <NavLink to={{
                                        pathname: '/blog',
                                        hash: '#submit',
                                        search: '?quick-submit=true'
                                    }}
                                    >Blog</NavLink>
                                </li>
                                <li>
                                    <NavLink to={{
                                        pathname: '/Table'
                                    }}>Table</NavLink>
                                </li>
                                <li>
                                    <NavLink to={{
                                        pathname: '/BCC'
                                    }}>BCC</NavLink>
                                </li>
                            </ul>
                        </li>
                        {this.state.sideBar}
    
                        <li>
                            <a href="javascript:;">
                                <i class="icon-folder"></i>
                                <span class="title">Multi Level Menu</span>
                                <span class="arrow "></span>
                            </a>
                            <ul class="sub-menu">
                                <li>
                                    <a href="javascript:;">
                                        <i class="icon-settings"></i> Item 1 <span class="arrow"></span>
                                    </a>
                                    <ul class="sub-menu">
                                        <li>
                                            <a href="javascript:;">
                                                <i class="icon-user"></i>
                                                Sample Link 1 <span class="arrow"></span>
                                            </a>
                                            <ul class="sub-menu">
                                                <li>
                                                    <a href="#"><i class="icon-power"></i> Sample Link 1</a>
                                                </li>
                                                <li>
                                                    <a href="#"><i class="icon-paper-plane"></i> Sample Link 1</a>
                                                </li>
                                                <li>
                                                    <a href="#"><i class="icon-star"></i> Sample Link 1</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#"><i class="icon-camera"></i> Sample Link 1</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="icon-link"></i> Sample Link 2</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="icon-pointer"></i> Sample Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="javascript:;">
                                        <i class="icon-globe"></i> Item 2 <span class="arrow"></span>
                                    </a>
                                    <ul class="sub-menu">
                                        <li>
                                            <a href="#"><i class="icon-tag"></i> Sample Link 1</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="icon-pencil"></i> Sample Link 1</a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="icon-graph"></i> Sample Link 1</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#">
                                        <i class="icon-bar-chart"></i>
                                        Item 3 </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
     }
    
     export default ReactTimeout(Menu)