divをクリックすると、コンソールで「asdf」がログアウトされるようにしたいのですが、これが小道具として渡されるメソッドがどのように機能するかはわかりません...
export class App extends Component {
render() {
func = (param) => {
console.log(param);
}
return (
<Card function={this.func} />
)
}
}
export class Card extends Component {
render() {
return(
<div onClick={this.props.function("asdf")}> this is a div </div>
)
}
}
func
)をクラススコープに配置し、から削除しrender()
ます。render()
メソッドから削除すると言っている理由は、呼び出すときにクラスのプロパティとメソッドへのポイントthis.func
として参照されるthis
ためです。func
クラスのグローバルスコープで定義されたプロパティまたはメソッドがないため、次のようになります。undefined
function
ジョセフが彼の答えで言ったように、関数がjavascriptのようにネイティブ関数キーワードを示すことができるのではなく、意味のある名前で小道具を渡すことができますコードは次のように更新できます:
export class App extends Component {
func = param => {
console.log(param);
};
render() {
return <Card myFunction={this.func} />;
}
}
export class Card extends Component {
render() {
return (
<div onClick={() => this.props.myFunction('asdf')}>
{' '}
this is a div{' '}
</div>
);
}
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加