react 父类组件向子类组件传值:参数/布尔值
时间: 2023-07-30 13:06:28 浏览: 57
在 React 中,父组件向子组件传递参数可以通过属性传递来实现。在父组件中通过设置子组件的属性来传递参数,子组件中可以通过 `props` 来访问这些属性。
比如,如果父组件想向子组件传递一个参数 `name`,可以这样写:
```jsx
class ParentComponent extends React.Component {
render() {
return (
<ChildComponent name="John" />
);
}
}
class ChildComponent extends React.Component {
render() {
return (
<div>
<p>My name is {this.props.name}.</p>
</div>
);
}
}
```
在上面的例子中,父组件 `ParentComponent` 通过设置 `ChildComponent` 的属性 `name`,将参数 `"John"` 传递给了子组件。子组件中可以通过 `this.props.name` 来获取这个参数。
如果需要向子组件传递布尔值,也是通过属性传递实现。比如,如果父组件想向子组件传递一个布尔值 `isHidden`,可以这样写:
```jsx
class ParentComponent extends React.Component {
render() {
return (
<ChildComponent isHidden={true} />
);
}
}
class ChildComponent extends React.Component {
render() {
return (
<div>
{this.props.isHidden ? <p>Hidden!</p> : <p>Not hidden!</p>}
</div>
);
}
}
```
在上面的例子中,父组件 `ParentComponent` 通过设置 `ChildComponent` 的属性 `isHidden`,将布尔值 `true` 传递给了子组件。子组件中可以通过 `this.props.isHidden` 来获取这个布尔值。在子组件中,可以使用条件语句来根据 `isHidden` 的值来显示不同的内容。