Question

我们可以将props传递给隐式具有相同名称和值的组件吗？

示例：假设我有一个名为x的变量：const x = 1; 而且我有一个组件，其属性为x。我可以将此变量隐式传递为值吗？像这样：<div x/>？

这对我不起作用，但是我看到了一个示例来说明这一点。

Answer 1

布尔值可以隐式传递给组件，就像@Ajay也在注释中指出的一样，

<div x />

基本上等同于

<div x={true} />

但是，如果您的变量不是布尔值，则不需要像这样写

<div x={x} />

或者，如果您有许多这样的道具，您可以形成一个物体

const cmpProps = {
   x,
   y,
   foo,
   bar
}

并使用Spread属性（如

）传递它们

<Comp {...cmpProps} />

Answer 2

阅读这些答案时，我有些顿悟。由于在ES6 +中，您可以将现有变量添加到这样的对象中：

const x = 42;
const obj = { x, y: 1337 };
console.log(obj); // result { x: 42, y: 1337 }

这意味着您可以将命名的道具添加到React组件中，例如：

const x = 42;
const elm = <MyComponent {...{x}} />;

Answer 3

您不能，没有赋值（<div x />）的道具会缩短（{<div x={true} />）（如Ajay Varghese所指出）；

传递相同的变量名将是<div x={x} />

如果您需要直接在JSX道具中传递多个值，则可以使用“ JSX传播属性”。

const divProps = { x: 1, y: 2 };
...
<div {...divProps} />

通常用于将所有道具从父母传递给孩子。

您还可以通过在传播后分配道具来覆盖它：

<div {...divProps} x=3 />

Answer 4

我也有ViggoV的方法。
为了弄清React道具内的破坏性，并了解 props是文字对象：

let text = "Aloha";

console.log( text );        //"Aloha"

// ❌ wrong one
console.log({ text })       /* { a : "Aloha" } indeed, this transforms variable
                               text into object but at reception of  
                               a component this one would result as "{}"  
                               as here we only pass the props' name -->  
                               returning indeed a value hence implicitly
                               == true */


// ✅ good one
console.log({ ...{ text }}) /* { a : "Aloha" } also transforms variable text  
                               into an object but this trick ( for 
                               component ) actually returns the  
                               - the props' name: "text"
                               - the props' value : which is now an 
                               object { text : 'Hello' }
                             */

➡️Example: showing the effects of destructured props passed

React的道具与其值同名

4 个答案: