2021/09/17

逐步使用 React 時，元件如何和外部 DOM 連結？

已知 React 會渲染指定的 div，學習資料中似乎沒有和外部 DOM 連結的方法？

React 元件渲染的條件是 props 或 state 變更時觸發，所以把 DOM 元素放入到 React 元件的 Props，就能夠滿足此條件，範例程式碼如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const e = React.createElement;

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.props.textBox.onchange = () => this.calcCallback();
    this.state = { text: "" };
  }

  calcCallback() {
    this.setState((state, props) => ({
      text: this.props.textBox.value
    }));
  }

  render() {
    return e(React.Fragment, null, e("div", null, this.state.text));
  }
}

ReactDOM.render(
  e(MyComponent, { textBox: document.querySelector("#textBox1") }, null),
  document.querySelector("#app2")
);

HTML

1
2
<input id="textBox1" value="Hello Vanilla"></input>
<div id="app2"></div>

 

成果圖



 

 

 

 

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)