我不知道为什么要删除反应中的html代码

Question

布局.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>
    )
  }
}