在React中插入非HTML規範的屬性標籤

目前的專案中，需要使用手機的照相及錄影功能。因為目前寫的是Mobile APP的程式，所以只能使用HTML5的語法來處理設備的叫用。

最簡單的方式，就是使用input標籤，設定type為file，再設定accept為只允許image檔。最後的html就如下所示：

<input type="file" accept="image/*" />

這種方式，執行在iOS的瀏覽器Safari中，是可以開啟照相機以進行拍照或錄影。但是執行在Android系統的手機中，幾乎都無法開啟照相機，而只能開啟資料夾中的照片或影片檔。

同事傳來一個網頁：Media Capture in Mobile Browsers，這篇文中說到，依據HTML Media Capture specification，加上一個capture attribute，Android系列的手機瀏覽器，就可以開啟照相機設備，進行拍照或錄影。所以把HTML標籤設定成以下的Code:

<input type="file" accept="image/*" capture/>   

一切看起來都很簡單乾淨。不過，這件事遇到了React.js，就會有些小問題了。因為capture這個attribute並非HTML5中的正式規格，所以即使我們在jsx檔中輸入該attribute，React會自動忽略-(JSX Gotchas)。所以產生出來的HTML中，該capture attribute就會自動消失不見。

怎麼辦？目前直接想到的一個繞路的寫法，就是使用Dangerously Set innerHTML，直接當作innerHTML強制輸出。

<div dangerouslySetInnerHTML={{__html: '<input type="file" name="photo" accept="image/*;" capture="camera"/>'}}></div>