-1
子コンポーネントに子コンポーネント経由でhighlight()
の関数を渡していますが、子コンポーネントでその関数を実行する際に問題が発生しています。コンソールにthis.props
をログオンするとcomponentDidMount()
が表示されますが、それを呼び出そうとすると動作しません。子コンポーネントに関数を渡す
class Queen extends React.Component {
componentDidMount() {
console.log('1) The Queen component has mounted!');
this.props.highlight()
}
render() {
return (
<div>
<h2>
{this.props.name}
</h2>
</div>
);
}
}
class King extends React.Component {
constructor(props) {
super(props)
this.state = {
highlighted: false
}
}
componentDidMount() {
console.log('2) The King component has mounted!');
}
highlight() {
this.setState({
highlighted: !this.state.highlighted
})
}
render() {
return (
<div className="card">
<h1>The King's Queen is...</h1>
<Queen
name="Amelia"
highlight={() => this.highlight.bind(this)}
className={this.state.highlighted ? 'highlight' : ''}/>
</div>
);
}
}
ReactDOM.render(<King />,
document.querySelector(".wrapper"));
それは子コンポーネントだと女王の部品が王の前に取り付けられているので、この出来事ですか?ここで何が起こっているのか、なぜこれがうまくいかないのかということについて私の頭を包み込むことを試みている。
であなたのハンドラをバインドすることができます。乾杯! –