您好我在单击按钮时尝试更改状态，仅当状态更改运行createBattle（）但单击按钮后状态不会更改 .
在开始时我将状态设置为false . 该按钮位于Form.js中，事件onClick = . 然后事件handleClick应该将状态设置为true，并且当状态在Battle.js中更改createBattle（）时应该呈现表 .
请告诉我，我做错了什么？
谢谢
App.js
import React from "react";
import Titles from "./Components/Title";
import Form from "./Components/Form";
import Battle from "./Components/Battle";
import "./App.css";
class App extends React.Component{
state = {
startPosition : false
}
render(){
return(
<div>
<header>
<div className="meniu"></div>
</header>
<div className="wrapper">
<div className="main">
<div className="container">
<div className="title-container">
<Titles />
<div className="info">
<Form startPosition={this.state.startPosition} />
</div>
</div>
<div className="form-container">
<Battle startPosition={this.state.startPosition}/>
</div>
</div>
</div>
</div>
</div>
);
}
};
export default App;
Battle.js
import React, {Component} from "react";
import Square from "./Square";
class Battle extends Component{
constructor(){
super();
}
createBattle = () => {
let table=[];
for (let i=1; i<=10; i++){
let children = [];
for (let j=1; j<=10; j++){
children.push(<Square />)
}
table.push(<div className="board-row">{children}</div>)
}
return table;
}
render(){
console.log(this.props);
return(
<div className="center">
{this.startPosition && this.props.createBattle()}
</div>
);
}
}
export default Battle;
Form.js
import React from "react";
class Form extends React.Component{
constructor(){
super();
}
handleClick = () =>{
this.setState({
startPosition: true
});
};
render(){
console.log(this.props);
return(
<div>
<button className="button" onClick={this.handleClick}>START</button>
</div>
);
}
};
export default Form;
2 回答
给定组件的
state和props不会在其他组件之间共享 .如果您需要在组件之间进行通信，则您通常有两种不同的选择：
将
state逻辑移动到公共父级并将此state作为props传递给子组件（请注意，您可能还需要传递一些函数以允许与子组件中的此父级状态进行交互）使用通用状态，使用类似Redux的框架（广泛用于复杂项目）
React不支持共享state或props值 . 所以你应该使用以下任何一种
React Redux
AsyncStorage