sokki sokki - 3 months ago 16
React JSX Question

Can't use electron's webview attributes in React component

Given an electron-webview like

<webview
minwidth="300"
minheight="300"
src="http://www.javascript-coder.com/files/window-popup/javascript-window-open-example1.html"
allowpopups
></webview>


Using directly in
app.html
it works as expected.

But when I use it inside a react-component or just ReactDom.render, it omits all props except
src
. So the popup don't open on click:

import React from 'react';
import { render } from 'react-dom';

render(
<webview
minwidth="300"
minheight="300"
src="http://www.javascript-coder.com/files/window-popup/javascript-window-open-example1.html"
allowpopups
/>,
document.getElementById('root')
);


In the devtools I get


Warning: Unknown props
minwidth
,
minheight
,
allowpopups
on
tag. Remove these props from the element. For details, see
https://facebook.github.io/react/warnings/unknown-prop.html


hint: I use the latest https://github.com/chentsulin/electron-react-boilerplate

Any ideas?

Answer

You need to wrap the webview element in a React component, and have the component create and insert the element into the DOM in componentDidMount(). See this issue for more details.