"canvas мутирует напрямую элементы dom" - не совсем понятно, что имеется ввиду. На canvas происходит рисование. Дом не изменяется, изменяется что-то внутри canvas. Следовательно, чтобы к этому "канвасу" (имеется ввиду сам тэг) обратиться, нам понадобиться ref. Например:
<canvas ref='myCanvas' width={180} height={30} />.
Второй вопрос, тоже не совсем понятен, что имеется ввиду под "концепцией и совместимостью"? Так как у вас есть ссылка на "канвас" через this.refs.myCanvas - можно далее вытащить context, с помощью getContext и уже дальше работать.
Пример компонента (в зависимости от пришедших данных, рисует столбики повыше, пониже..)
export default class SomeBars extends Component {
componentDidMount() {
this.drawBars(this.props)
}
drawBars(props) {
const { data } = props
const canvas = this.refs.canvas
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, canvas.width, canvas.height)
const tempData = data ? data.slice(0,60) : []
tempData.forEach((item,index) => {
ctx.fillStyle = 'rgba(3,169,244,1)'
ctx.fillRect(index*3, 30, 2, -(item/2))
})
}
render() {
return <canvas ref='canvas' width={180} height={30} />
}
}
Если же речь, про canvas и поддержку тасканий мыши и всяких крутых штук (например, как умеет fabric.js) - то можно почитать на
SO
Так же, гугл как обычно, выдает несколько ссылок,
например.
