为什么我不能在 React 中传递简单的道具。从父母到孩子

Question

我是React的初学者。我正在练习使用React将道具从父母传递给孩子。

但是。我不能通过道具。我只想把简单的道具从父母传给孩子。

我的代码在这里。https://codesandbox.io/s/props-test-3bgjy?file=/src/Child.js

我的代码没有显示错误。但是我的代码显示不正确。

import React, { Component } from "react";
import styled from "styled-components";
import Child from "./Child";
const Button = styled.button`
font-size: 16px;
padding: 16px;
`;
class App extends Component {
constructor(props) {
super(props);
this.state = {
counter: 0,
msg: "state(msg)initial",
flg: true
};
this.doAction = this.doAction.bind(this);
}
doAction() {
this.setState((state) => ({
counter: state.counter + 1,
msg: state.counter,
flg: !state.flg
}));
}
render() {
return (
<div>
<Child msg={this.state.message} flag={this.state.flag} />
<Button onClick={this.doAction}>Click</Button>
</div>
);
}
}
export default App;

import React, { Component } from "react";
import styled from "styled-components";
const Message = styled.p`
font-size: 24pt;
color: #900;
margin: 20px 0px;
padding: 5px;
border-bottom: 2px solid #900;
&[data-primary="true"] {
font-size: 24pt;
color: white;
background-color: #900;
margin: 20px 0px;
padding: 5px;
border-bottom: 2px solid #900;
}
`;
class Child extends Component {
render() {
return (
<div>
<Message data-primary={this.props.flag}>
count: {this.props.msg}
</Message>
</div>
);
}
}
export default Child;

Answer 1

您在<Child msg={this.state.message} flag={this.state.flag} />行中有错误

需要使用状态参数msg

<Child msg={this.state.msg} flag={this.state.flag} />

https://codesandbox.io/s/props-test-forked-gw69r?file=/src/Parent.js

Answer 2

看起来你有一个拼写错误；更改此行：

<Child msg={this.state.message} flag={this.state.flag} />

至

<Child msg={this.state.msg} flag={this.state.flg} />