我不知道为什么在react中删除html代码

Question

Layout.js

class Layout extends React.Component {
  render() {
    return (
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb" style={{margin: 0}}>
            <li class="breadcrumb-item"><a href="/movies">영화</a></li>
            <li class="breadcrumb-item"><a href="/showtimes">예매</a></li>
            <li class="ml-auto">
            </li>
          </ol>
        </nav>
        <script src="/static/js/sign_url.js"></script>
    );
  }
}

sign_url.js

if(getCookie("logged_in")=="true") {
  $(".breadcrumb > .ml-auto").html('<a href="/signout">signout</a>');
} else {
  $(".breadcrumb > .ml-auto").html('<div><a href="/signup">signup</a>&nbsp;/&nbsp;<a href="/signin">signin</a></div>');
}

重新加载->出现->消失

我不知道为什么要删除react中的html代码。

Answer 1

在呈现组件之前添加componentDidMoun。像这样：

 componentDidMount() {
    const script = document.createElement("script");

    script.src = "/static/js/sign_url.js";
    script.async = true;

    document.body.appendChild(script);
  }

Answer 2

为什么不像通常那样决定在组件中显示 signup / signin 或 signout 链接？

class Layout extends React.Component {
  render() {
    const loggedIn = getCookie('logged_in') == 'true'
    return (
      <nav ...>
        <ol ...>
          ...
          <li className='ml-auto'>
            {loggedIn ? 
              <a href='/signout'>signout</a> : 
              <div>
                <a href='/signup'>signup</a>
                <a href='/signin'>signin</a>
              </div<
            }
          </li>
        </ol>
      </nav>
    )
  }
}