Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/react/17.0.0-rc.0/umd/react.production.min.js"></script>
  <script
    src="https://cdn.bootcdn.net/ajax/libs/react-dom/0.0.0-0c756fb-f7f79fd/umd/react-dom.production.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/redux/4.0.5/redux.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
 
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
​
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  color: #fff;
  background: #000;
}
​
.father {
  padding: 10px;
  margin-top: 10px;
  border: 1px solid #fff;
}
​
.son {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #fff;
}
 
// 财产
let money = {
  amount: 100000
}
​
// 跑腿需要监听的事件
let fnLists = {}
let eventHub = {
  trigger(eventName, data) {
    let fnList = fnLists[eventName]
    if (!fnList) return
    for (let i = 0; i < fnList.length; i++) {
      fnList[i](data)
    }
  },
  on(eventName, fn) {
    if (!fnLists[eventName]) {
      fnLists[eventName] = []
    }
    fnLists[eventName].push(fn)
  }
}
​
class App extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
  }
​
  render() {
    return (
      <div className="home">
        <Father1 money={this.state.money}/>
        <Father2 money={this.state.money}/>
      </div>
    )
  }
}
​
class Father1 extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
  }
​
  render() {
    return (
      <div className="father">
        Father1 {this.state.money.amount}
        <Son11 money={this.state.money}/>
        <Son12 money={this.state.money}/>
      </div>
    )
  }
}
​
class Son11 extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
  }
​
  render() {
    return (
      <div className="son">
        son11 {this.state.money.amount}
      </div>
    )
  }
}
​
class Son12 extends React.Component {
  constructor() {
    super()
    this.state = {
      money: money
    }
    // 监听别人是否花钱
    eventHub.on("我想花钱", (data)=>{
      this.setState({
        money: money
      })
    })
  }
  // 通知跑腿需要花钱
  x() {
    money.amount -= 100
    eventHub.trigger("我想花钱", 100)
    this.setState({
      money: money
    })
  }
​
  render() {
    return (
      <div className="son">
        son12 {this.state.money.amount}
        <button onClick={() => this.x()}>花钱</button>
      </div>
    )
  }
}
​
class Father2 extends React.Component {
  constructor() {
    super()
  }
​
  render() {
    return (
      <div className="father">
        Father2 {this.props.money.amount}
        <Son21 money={this.props.money}/>
        <Son22 money={this.props.money}/>
      </div>
    )
  }
}
​
class Son21 extends React.Component {
  constructor() {
    super()
  }
​
  render() {
    return (
      <div className="son">
        son21 {this.props.money.amount}
      </div>
    )
  }
}
​
class Son22 extends React.Component {
  constructor() {
    super()
    // 监听别人是否花钱
    eventHub.on("我想花钱", (data)=>{
      this.setState({
        money: money
      })
    })
  }
  // 通知跑腿需要花钱
  x(){
    money.amount -= 100
    eventHub.trigger("我想花钱", 100)
    this.setState({
      money: money
    })
  }
  render() {
    return (
      <div className="son">
        son22 {this.props.money.amount}
        <button onClick={()=>this.x()}>花钱</button>
      </div>
    )
  }
}
​
render()
​
function render() {
  ReactDOM.render(<App/>, document.querySelector("#root"))
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Layouwenpro
0viewers