Uso un ContentEditable de react-contenteditable , dentro de él me gustaría mostrar un botón, que abre un menú al hacer clic, como este . Ya funciona, cuando represento el botón normalmente como un componente (no dentro de Contendeditable).

Desafortunadamente, react-contenteditable solo me permite configurar el html como se muestra en este ejemplo .

Ya intenté usar ReactDomServer.renderToStaticMarkup y ReactDomServer.renderToString , pero el botón activa la función onClick definida cuando hago clic en él.

Aquí está el código que probé: ( addSummaryStatementButton es el botón correspondiente y ContentEditable el contenido editable correspondiente.

 render = () => { const addSummaryStatementButton = <AddSummaryStatementButton addSummaryStatement={() => console.log('add summary statement')}/>; const staticMarkup = ReactDomServer.renderToStaticMarkup(addSummaryStatementButton); const stringMarkup = ReactDomServer.renderToString(addSummaryStatementButton); let summary = this.props.summary; summary = summary + '<br />' + staticMarkup + '<br />' + stringMarkup; return <div className='summary-area'> <div className='summary'> <ContentEditable html={summary} disabled={false} // use true to disable edition onChange={this.handleChange} // handle innerHTML change spellCheck={false} onBlur={this.props.analyzeSummary} /> </div> </div>; };

¡Estoy muy feliz por cualquier idea!