将布尔值作为 Props 传递给 React 中的组件
要将布尔值作为 props 传递给 React 中的组件,请将布尔值包裹在花括号中,例如 Child bool={true} />
。 我们传递给组件的所有非字符串类型的道具都必须用大括号括起来。
function Child({bool}) {
console.log(bool);
return <div>{bool && <h2>Hello world</h2>}</div>;
}
export default function App() {
return (
<div>
<Child bool={true} />
</div>
);
}
我们将 bool 属性传递给组件。
请注意
,我们必须将 prop 包裹在花括号中。
我们可能还会在网上看到仅使用道具名称传递布尔属性的示例。
function Child({bool}) {
console.log(bool);
return <div>{bool && <h2>Hello world</h2>}</div>;
}
export default function App() {
return (
<div>
<Child bool />
</div>
);
}
将 prop 作为 bool
传递与 bool={true}
相同。 但是,如果我们传递动态值(来自变量)或假布尔值作为 prop,则必须像在第一个代码片段中那样明确指定它。
所有非字符串类型的道具在传递时都必须用花括号括起来。
花括号语法让 React 知道有一个表达式必须求值。
然后,我们可以在子组件中解构和使用 bool
属性。
将对象或数组作为 props 传递时,必须使用相同的方法。
function Child({bool, obj, arr}) {
console.log(bool);
return (
<div>
<div>{bool && <h2>Hello world</h2>}</div>
<h2>name: {obj.name}</h2>
<h2>color: {arr[0]}</h2>
</div>
);
}
export default function App() {
return (
<div>
<Child bool={true} obj={{id: 1, name: 'Bob'}} arr={['blue', 'green']} />
</div>
);
}
请注意
,当我们将一个对象作为道具传递时,我们使用了两组大括号。
第一组标记表达式的开始,第二组是实际对象。
字符串是唯一可以作为 props 传递的值,无需将它们用大括号括起来。
function Child({str, bool, obj, arr}) {
console.log(bool);
return (
<div>
<h2>{str}</h2>
<div>{bool && <h2>Hello world</h2>}</div>
<h2>name: {obj.name}</h2>
<h2>color: {arr[0]}</h2>
</div>
);
}
export default function App() {
return (
<div>
<Child
str="Some content"
bool={true}
obj={{id: 1, name: 'Bob'}}
arr={['blue', 'green']}
/>
</div>
);
}
我们也可以将字符串用花括号括起来以保持一致,但这不是必需的。
function Child({str, bool, obj, arr}) {
console.log(bool);
return (
<div>
<h2>{str}</h2>
<div>{bool && <h2>Hello world</h2>}</div>
<h2>name: {obj.name}</h2>
<h2>color: {arr[0]}</h2>
</div>
);
}
export default function App() {
return (
<div>
<Child
str={'Some content'}
bool={true}
obj={{id: 1, name: 'Bob'}}
arr={['blue', 'green']}
/>
</div>
);
}
如果我们使用模板字符串或某些逻辑来构造字符串,则必须将其用大括号括起来。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。