TA貢獻1850條經驗 獲得超11個贊
您發布的代碼沒有問題，如下所示
class Child extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>{this.props.noOfSides}</h1>
<h1>{this.props.noOfDice}</h1>
</div>
);
}
}
class NoOfDice extends React.Component {
constructor(props) {
super(props);
this.state = { mystate: 1 };
}
render() {
return (
<div>
<h1>Number of Dice</h1>
<h2>{this.state.mystate}</h2>
<Child noOfDice={this.state.mystate} /> //error is
in this line
</div>
);
}
}
ReactDOM.render(<NoOfDice />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
TA貢獻1803條經驗 獲得超3個贊
Child 期望 noOfDice 作為道具，這就是為什么它在一種情況下而不是另一種情況下工作的原因。您應該保持名稱不變。我已將您的代碼編輯為 prop 名稱為acceptedNumber. 還要檢查子組件是否已正確導入。
嘗試這個：
// NoOfSides
class NoOfSides extends React.Component {
constructor(props) {
super(props);
this.state = { mystate: 6 };
}
render() {
return (<div>
<h1>Number of Sides</h1>
<h2 >
{this.state.mystate}
</h2>
<Child acceptedNumber={this.state.mystate} />
</div>
);
}
};
// NoOfDice
class NoOfDice extends React.Component {
constructor(props) {
super(props);
this.state = { mystate: 1 };
}
render() {
return (<div>
<h1>Number of Dice</h1>
<h2 >
{this.state.mystate}
</h2>
<Child acceptedNumber={this.state.mystate} />
</div>
);
}
};
// Child
class Child extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>{this.props.acceptedNumber}</h1>
</div>
)
}
}
舉報