如何在状态React JS中渲染元素？

Question

我现在麻烦将呈现状态内的html标签。 当我添加div危险时SetInnerHTML = {{__ html：this.state.actions}}似乎不能，因为我将在li标签中渲染菜单

this.state = {
sideBar : '<li>[object Object]</li>'
}
// when i render
render(){
 return(
  { this.state.sideBar}
 ) ==> // '<li>[object Object]</li>'

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

[对象对象]

Answer 1

您可以使它正常工作，而无需使用dragonallySetInnerHTML。 这是使用<ul>和可以直接在React中呈现的<li>标签数组的示例。

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>
    );
  }
}

Answer 2

像这样的代码

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)