完全独立的组件间如何通信

这是登录按钮的组件

class LoginRegButton extends LogWin {
  constructor(props) {
    super(props)
    this.state = Object.getPrototypeOf(this).state
  }

  render() {
    return (
      <div>
        <a href="javascript:" onClick={this.showLoginWin.bind(this)}><span className="logbut">登录</span></a>
        <i className="logbut">/</i>
        <a href="javascript:"><span className="logbut">注册</span></a>
      </div>
    )
  }

  showLoginWin(e) {
    console.log(this.props)
    this.setState({ show: true })
    this.style.logWinBack.display = "block"
  }
}

ReactDOM.render(
  <LoginRegButton />,
  document.getElementById('logarea')
)

LogWin是登录窗体的组件，被渲染为了Body标签的一个子DIV，但我不知道怎么用Login组件改变LogWin组件的state从而进行渲染，显示div。

另外这个登录按钮我认为完全可以直接写为HTML，不必用React，但我不知道外部如何改变React组件的状态，使其进行渲染。

完全独立的组件…

你的 Demo 不是 完全独立的组件，而是两个完全独立的 React App，这两个要通信，只能在 js 的上下文里面重新执行 ReactDOM.render

为什么不把按钮和 LogWin 放在同一个组件中渲染呢？

ReactDOM.render(
  <LoginWin>
    <LogForm />
    <LoginButton />
  </LoginWin>
)