我试图从Button类中设置的道具中提取Number的值。然后在发现函数中呈现此值。该类正确显示Number的值。但是,该功能未显示Number的任何值。
为了使它正常工作,我已经花了一段时间了。但是我找不到解决问题的办法。
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
Number: "55"
};
}
render() {
return (
<div>
<p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
</div>
);
}
};
const discover = (props) => {
return (
<div>
<Button />
<p>Number: {props.Number}</p> //The value of Number is not displayed
</div>
);
};
export default discover;
没有错误消息。 预期结果显示: https://i.imgur.com/fr61SE0.png
实际结果显示: https://i.imgur.com/MRE0Lsj.png
答案 0 :(得分:0)
您的发现是一个功能组件,您没有将任何东西传递给您的组件,在按钮组件中,您正在设置状态,这就是输出背后的原因。试试这个。
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
Number: "55"
};
}
render() {
return (
<div>
<p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
<discover {...this.state} />
</div>
);
}
};
const discover = (props) => {
return (
<div>
<p>Number: {props.Number}</p> //The value of Number is not displayed
</div>
);
};
export default Button;
现在您将获得想要的输出
答案 1 :(得分:0)
我不确定您在哪里调用Discover组件,但是您需要将数字向下传递给Discover组件以使其呈现。
class Button extends React.Component {
constructor(props) {
super(props);
this.state = {
Number: "55"
};
}
render() {
return (
<div>
<p>Number: {this.state.Number}</p> //The value of Number is displayed on the page
<Discover Number={this.state.Number}/> // we are passing Number as a prop to the Discover component
</div>
);
}
};
const Discover = (props) => {
return (
<div>
<Button />
<p>Number: {props.Number}</p> //The value of Number is not displayed
</div>
);
};
export default Discover;
我还将大写您的自定义React组件,例如Discover。
答案 2 :(得分:0)
您希望彼此之间保持发现和按钮同步,但是目前尚无任何操作。 button是具有本地状态的发现子项。而不是让父级具有状态,然后可以将其传递给按钮组件。
class Discover extends Component {
state = { number: 55 }
render() {
const { number } = this.state
return (
<div>
<Button number={number} />
<p>Number: {number}</p>
</div>
);
}
};
const Button = ({number) => {
return (
<div>
<p>Number: {number}</p>
</div>
);
}
};
export default Discover;