Posiadanie komponentu root (aplikacja) Chcę przekazać dane z elementu root do całkowitego składnika. Celem jest zwrócenie łącznie danych przekazanych przez rekwizyty (10 + 7 + 14 = 31).

Zrobiłem to tak, jak widać na poniższym kodzie i działa. Ale nie rozumiem, dlaczego miałbym zadzwonić do tych zmiennych ćwiczeń3:

<Total  exercises3={exercises1+exercises2+exercises3}/>

Jeśli zmieniam nazwę zmienną na przykład, totalExCersises, nie działa. Dlaczego?

<Total  totalExcersises={exercises1+exercises2+exercises3}/>

Czuję, że powinna być lepszy sposób na uzyskanie suma danych przekazanych przez rekwizyty.

Oto mój kod: Kod Sandbox

import React from 'react'


const Total= (props) => {
  return(
 <p>Number of exercises: {props.exercises1} {props.exercises2} {props.exercises3}</p> 

      )
}




const App = () => {
  
  const exercises1 = 10

  const exercises2 = 7

  const exercises3 = 14

  return (
    <div>
 
      <Total  exercises3={exercises1+exercises2+exercises3}/>
      
  
    </div>
  )
}

export default App

0
Lahey Corey 19 kwiecień 2021, 13:14

4 odpowiedzi

Najlepsza odpowiedź

Może spróbuj tego,

import React from 'react'


const Total= ({ totalExercises }) => (
 <p>Number of exercises: {totalExercises}</p> 
 );




const App = () => {
  const exercises1 = 10

  const exercises2 = 7

  const exercises3 = 14

  return (
    <div>
      <Total totalExercises={exercises1+exercises2+exercises3}/>
    </div>
  )
}

export default App

"Całkowity" komponent szuka teraz podpórki "totalExcertises", więc jeśli zmieniasz nazwę prop-var, komponent nie może go już znaleźć. Zawsze musisz zmieniać nazwę obu.

2
Carlotta 19 kwiecień 2021, 10:31

"Jeśli zmieniam nazwę zmiennej na przykład, totalExCersises, nie działa. Czemu?"

Ta nazwa zmiennej jest ważna, reaguj go używa go przy przypisaniu wartości do rekwizytów. Jeśli nazywa się totalExcersises, musisz zrobić props.totalExcersises w komponencie.

To nie jest dokładne. Ale aby pomóc zilustrować, dlaczego jest ważne, reakcja jest rodzajem w ten sposób:

const Total = (props) => {
  console.log(props)
}

const App = () => {

  const exercise1 = 10

  const exercise2 = 7

  const exercise3 = 14

  return (
    Total({
      totalExercises: exercise1 + exercise2 + exercise3
    })
  )

}

App()
-1
Michael Hoobler 19 kwiecień 2021, 10:37

W każdym razie ten kod jest nieprawidłowy. Dajesz je tylko prop exercises3, ale wyświetlasz {props.exercises1} {props.exercises2} {props.exercises3} w komponencie. Po prostu przepawaj totalExcersises={exercises1+exercises2+exercises3} i dostosuj swój kod jak: <p>Number of exercises: {props.totalExcersises} </p>

0
jonas 19 kwiecień 2021, 10:18

Możesz po prostu użyć {props.totalExcersises} w całkowitym komponencie.

<p>Number of exercises: {props.totalExcersises} </p> 
1
Tushar 19 kwiecień 2021, 10:20