React 按钮不会多次呈现
React button does not render more than once
我有一个用于呈现新组件的按钮(实际上是图表,我已将示例简化为仅显示文本),它会在第一次单击时向页面添加文本,但不会添加任何新的文本对象进一步点击页面。
我已经测试过,当我多次按下该函数时,它会向数组中添加元素,但它确实如此,所以它为什么不呈现新文本,以查看该函数是否实际上是 运行 - 多次单击时页面对象?
我可能遗漏了一些基本的东西,如有任何解释,我将不胜感激。
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>
)
}
});
您目前正在使用一个将单个标志设置为 true 的按钮,然后在该标志为 true 时呈现组件。如果您想渲染多个组件,您需要状态的某些方面与您要渲染的组件数量相关,然后基于此进行渲染。例如,正如您提到的,如果您使用数组或计数器变量,则可以使用 .map
甚至 for 循环来呈现多个组件。现在您只要求 React 有条件地呈现单个 NewChart 组件。
问题是您没有添加新项目,而只是渲染或不渲染取决于 checked
的值。诀窍是让一组元素呈现并在每次单击按钮时添加一个元素。
这里有一个工作示例:
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')
)
我有一个用于呈现新组件的按钮(实际上是图表,我已将示例简化为仅显示文本),它会在第一次单击时向页面添加文本,但不会添加任何新的文本对象进一步点击页面。
我已经测试过,当我多次按下该函数时,它会向数组中添加元素,但它确实如此,所以它为什么不呈现新文本,以查看该函数是否实际上是 运行 - 多次单击时页面对象?
我可能遗漏了一些基本的东西,如有任何解释,我将不胜感激。
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>
)
}
});
您目前正在使用一个将单个标志设置为 true 的按钮,然后在该标志为 true 时呈现组件。如果您想渲染多个组件,您需要状态的某些方面与您要渲染的组件数量相关,然后基于此进行渲染。例如,正如您提到的,如果您使用数组或计数器变量,则可以使用 .map
甚至 for 循环来呈现多个组件。现在您只要求 React 有条件地呈现单个 NewChart 组件。
问题是您没有添加新项目,而只是渲染或不渲染取决于 checked
的值。诀窍是让一组元素呈现并在每次单击按钮时添加一个元素。
这里有一个工作示例:
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')
)