Tengo un botón para representar nuevos componentes (en realidad gráficos, he simplificado el ejemplo para mostrar solo texto) que agrega un texto a la página la primera vez que se hace clic, pero no agregará ningún objeto de texto nuevo a la página con más clics
He probado para ver si la función realmente se está ejecutando cuando la presiono varias veces al hacer que agregue elementos a una matriz, lo que hace, entonces, ¿por qué no representa nuevos objetos de texto en la página cuando se hace clic varias veces? ?
Podría estar perdiendo algo fundamental y agradecería cualquier explicación.
import React from 'react';
import './App.css';
class NewChart extends React.Component {
render() {
return (
<div>Text</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button {...this.props}>
Add chart
</button>
);
}
}
class ChartApp extends React.Component {
constructor() {
super();
this.state = {
clicked: false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState({
clicked: true
});
}
render() {
return (
<div>
<Button onClick={this.handleClick} />
{this.state.clicked ? <NewChart />: null}
</div>
);
}
};
export default React.createClass({
render: function () {
return (
<div>
<ChartApp>
</ChartApp>
</div>
)
}
});
2 respuestas
Actualmente está utilizando un botón que establece un indicador único en verdadero y luego representa un componente cuando ese indicador es verdadero. Si desea renderizar múltiples componentes, necesita algún aspecto de su estado que se relacione con la cantidad de componentes que desea renderizar, y luego renderizar en función de eso. Por ejemplo, como mencionas, si usas una matriz o quizás una variable de contador, podrías usar .map
o incluso un bucle for para representar múltiples componentes. En este momento solo le está pidiendo a React que renderice condicionalmente un solo componente NewChart.
El problema es que no está agregando nuevos elementos, sino simplemente renderizando o no dependiendo del valor de checked
. El truco es tener una matriz de elementos para renderizar y agregar un elemento más cada vez que haga clic en el botón.
Aquí tienes un ejemplo de trabajo:
import React from 'react';
import './App.css';
class NewChart extends React.Component {
render() {
return (
<div key={this.props.key}>Text</div>
);
}
}
class Button extends React.Component {
render() {
return (
<button {...this.props}>
Add chart
</button>
);
}
}
class ChartApp extends React.Component {
constructor() {
super();
this.state = {
elements: []
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
var newArray = this.state.elements.slice();
newArray.push(<NewChart key={this.state.elements.length + 1}/>);
this.setState({
elements: newArray
});
}
render() {
return (
<div>
<Button onClick={this.handleClick} />
{this.state.elements.map((elem) => {
return elem;
})}
</div>
);
}
}
class App extends React.Component {
render () {
return (
<div>
<ChartApp />
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.