在原生 html form 內整合 React app 的一種 design pattern

最近開發功能，要做一個比較複雜的表單

大部份可用簡單的 html form 做完，少部份需要用 react 寫

最後設計出的作法如下：

除了 render React app 的元素容器之外

<div id="review-columns-setting-app"><div class="mt-3">載入中...</div></div>

form 內留一個 hidden input，form submit 時可自然送出。

需要塞預設值的話也可以。

@if (isset($topic))
<input type="hidden" id="review-columns-setting-state" name="review-columns-setting-state" value="{{ $topic->review_columns }}">
@else
<input type="hidden" id="review-columns-setting-state" name="review-columns-setting-state">
@endif

render 時，有預設值就以 props 傳入：

if ($('#review-columns-setting-state').val()) {
  ReactDOM.render(<App columns={$('#review-columns-setting-state').val()} />, document.getElementById('review-columns-setting-app'));
} else {
  ReactDOM.render(<App />, document.getElementById('review-columns-setting-app'));
}

接著設定

componentDidMount() {
  if (this.props.columns) {
    this.setState({ columns: JSON.parse(this.props.columns) });
  }
}

而在 App component 本身，則在 render 函式內傳值

render() {

  $('#review-columns-setting-state').val(JSON.stringify(this.state.columns));

如此一來，複雜的 React 本身狀態可以用 state 與 props 管理，但最終會同步到 html form 內，可以直接送出。