在 React 中,你可以在子组件中定义一个方法,然后在父组件中调用这个方法。举个例子:
// 定义子组件
class MyChildComponent extends React.Component {
myMethod() {
// 这里是 myMethod 的代码
}
render() {
return <div>这是子组件</div>;
}
}
// 在父组件中调用子组件的方法
class MyParentComponent extends React.Component {
render() {
return (
<div>
这是父组件
<MyChildComponent ref={(child) => { this.child = child; }} />
</div>
);
}
componentDidMount() {
this.child.myMethod();
}
}
但是,在你的 JSX 模板中调用子组件的方法是不可以的。JSX 模板只是用来描述组件的外观的,并不能执行代码。如果你想要在 JSX 模板中执行代码,你可以使用 JavaScript 表达式,比如:
<div>{this.state.showMessage ? '消息已显示' : '消息未显示'}</div>
在这个例子中,如果 this.state.showMessage
的值为 true
,就会显示 '消息已显示'
;否则会显示 '消息未显示'
。
如果你的子组件方法返回的是 true
或 false
,你可以在父组件中调用这个方法,然后将结果存到父组件的状态中,然后在 JSX 模板中使用这个状态。
希望这能帮到你!