Pasé dos accesorios en dos representaciones separadas del mismo componente y pasé un accesorio como una función y otro como una cadena. Sin embargo, al acceder a él en el componente para renderizar, dice: "props.prop1 no es una función"
Este es mi archivo App.js:
import React from 'react'; import Test from './components/Test'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <Test prop1={() => {return "a"}}/> <Test prop2="b"/> </header> </div> ); } export default App;Este es mi archivo Test.js:
import React from "react"; function Test(props) { return ( <> <div className="test"> <div>Test data {props.prop1()} </div> <div>{props.prop2}</div> </div> </> ); } export default Test;Ha declarado 2 componentes <Test> en su <App> y no está pasando prop2 en el segundo:
Es posible que desee pasarlos todos al mismo tiempo así:
import React from 'react'; import Test from './components/test'; function App() { return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit {' '} <code> src / App.js </code> {' '} and save to reload. </p> <Test prop1={() => 'a'} prop2="b" /> </header> </div> ); } export default App;Está pasando prop1 y prop2 alternativamente. Así que deberías pasar ambos apoyos.
Si desea pasar accesorios alternativos, puede hacerlo. Agregue la función predeterminada (que solo invoca pero no hará nada) si prop1 está ausente como
prop1 = () => {} 1) Debe usarse cuando desee mostrar el div a pesar del valor prop1
import React from "react"; function Test({ prop1 = () => {}, prop2 }) { return ( <> <div className="test"> <div>Test data {prop1()} </div> <div>{prop2}</div> </div> </> ); } export default Test; 2) Si desea ocultar el div si prop1 no está presente, puede usar && como
import React from "react"; function Test(props) { return ( <> <div className="test"> { props.prop1 && <div>Test data {props.prop1()} </div> } { props.prop2 && <div>{props.prop2}</div> } </div> </> ); } export default Test;