Reaccionar el componente del reloj -- beginner campo con datetime campo con react.js campo con timer campo con jsx camp codereview Relacionados El problema

React clock component


3
vote

problema

Español

Soy nuevo en reactive.js y este código vino de 30 días de reacción - Día 7 . Sin embargo, el ejemplo del código dado no funcionaba, así que me reescribí. Mi mayor problema aquí es cómo hacer que el componente funcione sin funciones getTime () usando ambos estados y devueltos. Se aprecian cualquier otra sugerencia.

  9988776655544337  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <body>   <div id="app"></div> </body>8  
Original en ingles

I'm new to React.js and this code came from 30 Days of React - Day 7. However the given code example wasn't working so I rewrote it myself. My biggest issue here is how to make the component work without function getTime() using both setState and return. Any other suggestions are appreciated.

class Clock extends React.Component {     constructor(props) {         super(props);         this.state = {currentTime: this.getTime()};     }      getTime() {         const currentTime = new Date(),         hours = currentTime.getHours(),         minutes = currentTime.getMinutes(),         seconds = currentTime.getSeconds(),         ampm = hours >= 12 ? 'pm' : 'am';         this.setState({currentTime: {hours, minutes, seconds, ampm}});         return {hours, minutes, seconds, ampm};     }      componentDidMount() {         const intervalId = setInterval(this.getTime.bind(this), 1000);         this.setState({intervalId: intervalId});      }      componentWillDisMount() {         clearInterval(this.state.intervalId);     }      render() {         const {hours, minutes, seconds, ampm} = this.state.currentTime;         return (             <div className="clock">                 {hours == 0 ? 12 : (hours > 12) ? hours - 12 : hours}:                 {minutes > 9 ? minutes : `0${minutes}`}:                 {seconds > 9 ? seconds : `0${seconds}`} {ampm}             </div>         )        } }  ReactDOM.render(<Clock />, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <body>   <div id="app"></div> </body>
              

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Si está asignando al estado, no necesita asignarlo al principio.

  this.setState({currentTime: {hours, minutes, seconds, ampm}});  // you don't need to return at all.   

Puede reemplazar esto con algún valor que indica que aún no se ha cargado, lo que también tiene el beneficio de no aparecer para un crawler de página.

Reescribe

  class Clock extends React.Component {     constructor(props) {        super(props);        this.state = {currentTime: {hours:0, minutes:0, seconds: 0, ampm: 'N/A'}};     }          getTime() {         const currentTime = new Date(),             hours = currentTime.getHours(),             minutes = currentTime.getMinutes(),             seconds = currentTime.getSeconds(),             ampm = hours >= 12 ? 'pm' : 'am';             this.setState({currentTime: {hours, minutes, seconds, ampm}});         }              componentDidMount() {             this.getTime();             const intervalId = setInterval(this.getTime.bind(this), 1000);             this.setState({intervalId: intervalId});         }              componentWillDisMount() {             clearInterval(this.state.intervalId);         }              render() {             const {hours, minutes, seconds, ampm} = this.state.currentTime;             return (                 <div className="clock">                     {hours == 0 ? 12 : (hours > 12) ? hours - 12 : hours}:                     {minutes > 9 ? minutes : `0${minutes}`}:                     {seconds > 9 ? seconds : `0${seconds}`} {ampm}                 </div>             )            }     }          ReactDOM.render(<Clock/>, document.querySelector("#app"));1  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <body>   <div id="app"></div> </body>  
 

If it's assigning to the state, you don't need to assign it at the beginning.

this.setState({currentTime: {hours, minutes, seconds, ampm}});  // you don't need to return at all. 

You can replace this with some value that indicates that it hasn't loaded yet, which also has the benefit of not showing up for a page crawler.

Rewrite

class Clock extends React.Component {     constructor(props) {        super(props);        this.state = {currentTime: {hours:0, minutes:0, seconds: 0, ampm: 'N/A'}};     }          getTime() {         const currentTime = new Date(),             hours = currentTime.getHours(),             minutes = currentTime.getMinutes(),             seconds = currentTime.getSeconds(),             ampm = hours >= 12 ? 'pm' : 'am';             this.setState({currentTime: {hours, minutes, seconds, ampm}});         }              componentDidMount() {             this.getTime();             const intervalId = setInterval(this.getTime.bind(this), 1000);             this.setState({intervalId: intervalId});         }              componentWillDisMount() {             clearInterval(this.state.intervalId);         }              render() {             const {hours, minutes, seconds, ampm} = this.state.currentTime;             return (                 <div className="clock">                     {hours == 0 ? 12 : (hours > 12) ? hours - 12 : hours}:                     {minutes > 9 ? minutes : `0${minutes}`}:                     {seconds > 9 ? seconds : `0${seconds}`} {ampm}                 </div>             )            }     }          ReactDOM.render(<Clock/>, document.querySelector("#app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <body>   <div id="app"></div> </body>
 
 
2
 
vote

En Creo que puede mejorar el render siguiendo la filosofía de reacción de escribir componentes reutilizables.

Si se ve más cerca de su código:

  render() {     const {hours, minutes, seconds, ampm} = this.state.currentTime;     return (         <div className="clock">             {hours == 0 ? 12 : (hours > 12) ? hours - 12 : hours}:             {minutes > 9 ? minutes : `0${minutes}`}:             {seconds > 9 ? seconds : `0${seconds}`} {ampm}         </div>     )    }   

Aquí tienes la duplicación en la impresión de un dígito. Lo tiene con minutos y segundos, pero creo que las horas también deben imprimirse de la misma manera.

Puede introducir un componente de pantalla como una función simple:

  const PrintDigit = ({ digit }) =>     (<React.Fragment>{digit < 9 && '0'}{digit}</React.Fragment>)   

La función tiene apoyos como un parámetro de entrada, que aquí me extendí con una variable dígitos para documentar los únicos accesorios esperados del componente .

Entonces, se podría reescribir a su método Render () :

  render() {     const {hours, minutes, seconds, ampm} = this.state.currentTime;     return (         <div className="clock">             <PrintDigit digit={hours === 0 ? 12 : hours % 12} />:             <PrintDigit digit={minutes} />:             <PrintDigit digit={seconds} /> {ampm}         </div>     )    }   

no es una gran mejora, pero como su código es un ejercicio para aprender reaccionar, creo que es bueno comenzar a pensar de esa manera.

El componente funcional podría permanecer en el mismo archivo de su componente principal o puede ponerlo en un archivo diferente y luego importar dónde lo necesita.

 

In think you can improve the render by following the React philosofy of writing reusable components.

If you look closer at your code:

render() {     const {hours, minutes, seconds, ampm} = this.state.currentTime;     return (         <div className="clock">             {hours == 0 ? 12 : (hours > 12) ? hours - 12 : hours}:             {minutes > 9 ? minutes : `0${minutes}`}:             {seconds > 9 ? seconds : `0${seconds}`} {ampm}         </div>     )    } 

Here you have duplication in printing a digit. You have it with minutes and seconds, but I think hours should be printed the same way too.

You can introduce a display component as a plain function:

const PrintDigit = ({ digit }) =>     (<React.Fragment>{digit < 9 && '0'}{digit}</React.Fragment>) 

The function have props as an input parameter, that here I spread with a variable digit to document the only props expected from the component.

So your render() method could be rewritten:

render() {     const {hours, minutes, seconds, ampm} = this.state.currentTime;     return (         <div className="clock">             <PrintDigit digit={hours === 0 ? 12 : hours % 12} />:             <PrintDigit digit={minutes} />:             <PrintDigit digit={seconds} /> {ampm}         </div>     )    } 

Is not that big improvement, but as your code is an exercise to learn React, I think is good to start thinking in that way.

The functional component could stay just in the same file of your main component or you can put it in a different file and then import where you need it.

 
 

Relacionados problema

2  Simple Blog usando reaccionar Redux React-Router  ( Simple blog using react redux react router ) 
He implementado la lógica de mi aplicación, pero no estoy seguro de si es una forma adecuada o no. Tarea: cree una aplicación de reacción usando REDUX, Reac...

1  Compruebe qué estado está activado y representa el JSX en consecuencia  ( Check which state is activated and render the jsx accordingly ) 
¡Solo preguntando cómo puedo hacerlo hacer esto de manera más eficiente / hacerlo más atractivo visualmente para el usuario? Teacher1 ...

1  Mostrar condicionalmente varios paneles de video  ( Conditionally show various video panels ) 
El caso de uso que este código intenta cumplir es Habrá una sesión de entrevistas en la que se realiza la videollamada entre dos participantes, interviewer...

1  Representación de dos logotipos en un componente de búsqueda de reacción  ( Rendering two logos in a react search component ) 
Uso de react.perf Encontré que hay pocos cuellos de botella en el código de renderizado de un componente de la aplicación Big React (Mire los números 1 y 2 en...

1  Componente de información sobre herramientas sin estado usando ganchos de reacción y ref  ( Stateless tooltip component using react hooks and ref ) 
Lo que estoy tratando de crear es un componente de información de herramientas genéricos que puedo usar en cualquier lugar. Decidí por un componente sin estad...

1  Reaccionar el componente del contenedor  ( React container component ) 
Este es mi primer proyecto Reactjs y estoy tratando de construir una página de mis componentes. Pensé que sería mejor crear un componente de sección y luego c...

3  Reaccionar componente con la carga condicional  ( React component with conditional form loading ) 
Estoy rehaciendo una aplicación existente en una sola aplicación de página. He creado este componente para tomar el lugar de varias páginas en la versión ante...

1  Aplicación de reacción para principiantes: manejar diferentes componentes con la misma variable  ( Beginner react app handling different components with the same variable ) 
He hecho una aplicación simple que muestra si el término ingresado en la barra de búsqueda está presente en una serie de palabras en inglés comunes. Este es...

3  Lista de recetas REDUX  ( Redux recipe list ) 
Hice una simple aplicación React + Redux que le permite agregar y eliminar recetas a una lista. Aquí están las historias de usuarios que la aplicación cumpl...

5  Calculadora de reacción  ( React calculator ) 
Mi compañía va a dar un gran salto pronto, y como todavía estamos corriendo en Angularjs 1.3.x, decidimos hacer que el cambio reaccione por una gran cantidad ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos