freeCodeCamp

4.4 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036171	Render State in the User Interface	6	false		Estado de render en la interfaz de usuario

Description

Una vez que define el estado inicial de un componente, puede mostrar cualquier parte de él en la interfaz de usuario que se representa. Si un componente tiene estado, siempre tendrá acceso a los datos en state en su método render() . Puede acceder a los datos con this.state . Si desea acceder a un valor de estado dentro del return del método de procesamiento, debe incluir el valor entre llaves. State es una de las características más poderosas de los componentes en React. Le permite hacer un seguimiento de los datos importantes en su aplicación y generar una IU en respuesta a los cambios en estos datos. Si sus datos cambian, su interfaz de usuario cambiará. React utiliza lo que se llama un DOM virtual, para realizar un seguimiento de los cambios detrás de la escena. Cuando se actualizan los datos del estado, se activa una nueva representación de los componentes que utilizan esos datos, incluidos los componentes secundarios que recibieron los datos como prop. Reacciona actualiza el DOM real, pero solo cuando es necesario. Esto significa que no tiene que preocuparse por cambiar el DOM. Simplemente declara cómo debería ser la interfaz de usuario. Tenga en cuenta que si hace que un componente tenga estado, ningún otro componente es consciente de su state . Su state es completamente encapsulado, o local a ese componente, a menos que pase datos de estado a un componente secundario como props . Esta noción de state encapsulado es muy importante porque le permite escribir cierta lógica, y luego tener esa lógica contenida y aislada en un lugar en su código.

Instructions

En el editor de código, MyComponent ya tiene estado. Defina una etiqueta h1 en el método de procesamiento del componente que representa el valor de name del estado del componente. Nota: el h1 solo debe representar el valor del state y nada más. En JSX, cualquier código que escriba con llaves { } será tratado como JavaScript. Entonces, para acceder al valor desde el state simplemente incluya la referencia entre llaves.

Tests

tests:
  - text: <code>MyComponent</code> debe tener un <code>name</code> clave con el valor <code>freeCodeCamp</code> almacenado en su estado.
    testString: 'assert(Enzyme.mount(React.createElement(MyComponent)).state("name") === "freeCodeCamp", "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.");'
  - text: <code>MyComponent</code> debe representar un encabezado <code>h1</code> incluido en un solo <code>div</code> .
    testString: 'assert(/<div><h1>.*<\/h1><\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.");'
  - text: El encabezado <code>h1</code> representado debe contener texto representado desde el estado del componente.
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: "TestName" });   return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === "<div><h1>TestName</h1></div>", "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.");};'

Challenge Seed

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp'
    }
  }
  render() {
    return (
      <div>
        { /* change code below this line */ }

        { /* change code above this line */ }
      </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required

4.4 KiB Raw Blame History