Tengo un componente de navegación:
class SomeClass extends React.Component{ showItem = () =>{ console.log("itemShown"); return( <Item/> ); } render(){ return( <div onClick={() => this.showItem()} > ABC </div> ); } export default Nav;Lo estoy llamando en App.js:
function App() { return ( <div className="app"> <SomeClass /> </div> ); } export default App;Cómo tener el componente Item en el método showItem en SomeClass , para que se muestre en el componente funcional de la aplicación .
En App.js probé:
<div className="app"> <SomeClass showItem={showItem} /> </div>Sin embargo, no funcionó.
¿Cuál es el mejor enfoque para esto?
Puede administrar un estado dentro de su componente SomeClass de la siguiente manera. Luego, puede alternarlo cuando necesite mostrar o dejar de mostrar el componente Item .
class SomeClass extends React.Component { constructor(props) { super(props); this.state = { isShowItem: false, }; this.showItem = this.showItem.bind(this); } showItem = () => { this.setState(!this.state.isShowItem); }; render() { return ( <> <div onClick={this.showItem}>ABC</div> {this.state.isShowItem && <Item />} </> ); } } export default SomeClass;En estos días, las personas no tienden a usar clases de reacción, usan componentes funcionales. Así es como lo hace con componentes funcionales.
Gancho de estado:
toggleShowItem cambia el estado de showItem entre true y false cada vez que se activa el componente onClick de SomeClass (que ya no es una clase, pero así es como ha llamado la suya).
Representación condicional:
El ShowItem se representa siempre que el valor del enlace de estado sea true .
export default function App() { const [showItem, setShowItem] = useState(false); const toggleShowItem = () => { setShowItem(!showItem); } return ( <div className="App"> <SomeClass toggleShowItem={toggleShowItem}> {showItem && <ShowItem />} </SomeClass> </div> ); } export default function SomeClass({toggleShowItem}) { return <div onClick={toggleShowItem}>ABC</div>; }La mejor manera de mostrar el componente Item es usar React State y React Props . Lea estos documentos, ya que lo ayudarán mucho en el desarrollo de reacción.
Opción 1:
habrá un estado en el componente de la App para showItem . Luego pasa el showItem como accesorios en el componente SomeClass .
Opcion 2:
el estado de showItem está en el componente SomeClass ; luego, al hacer clic en el interruptor, el estado se actualizará.