Tengo un componente React simple como este dentro del archivo components/daw/index.js
. Debería mostrar solo un texto:
import React from 'react'; export default class Daw extends React.PureComponent { constructor(props) { super(props); } render() { return ( <div className="daw-container" key="daw-container"> <span>DAW placeholder</span> </div> ); } }
Estoy usando el componente anterior con otro componente de React. Dentro del archivo components/media-viewer/VideoViewer/index.js
tengo:
export default class VideoViewer extends React.PureComponent { render() { return ( <div> <Daw/> </div> ); } }
El DAW placeholder
de texto simple no aparece en la interfaz de usuario. ¿Me estoy perdiendo algo obvio? ¿Se está perdiendo algo trivial?
class Daw extends React.PureComponent { constructor(props) { super(props); } render() { return ( <div className="daw-container" key="daw-container"> <span>DAW placeholder</span> </div> ); } } class VideoViewer extends React.PureComponent { render() { return ( <div> <Daw/> </div> ); } } ReactDOM.render(<VideoViewer />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>
El fragmento de código proporcionado por @CertainPerformance muestra que la respuesta es no . No se pierde nada trivial. La falla está en otra parte del código.
class Daw extends React.PureComponent { constructor(props) { super(props); } render() { return ( <div className="daw-container" key="daw-container"> <span>DAW placeholder</span> </div> ); } } class VideoViewer extends React.PureComponent { render() { return ( <div> <Daw/> </div> ); } } ReactDOM.render(<VideoViewer />, document.querySelector('.react'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>