正如@Ajay 在评论中指出的那样，布尔值可以隐式传递给组件，例如

<div x />

这基本上相当于

<div x={true} />

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

<div x={x} />

或者如果你有很多这样的props，你可以形成一个像

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

并使用 Spread 属性传递它们，例如

<Comp {...cmpProps} />

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

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

这意味着您可以向 React 组件添加命名props，例如：

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

你不能，没有赋值的props ( <div x />) 是( ) 的缩写<div x={true} />（正如 Ajay Varghese 指出的那样）；

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

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

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

它通常用于将所有props从父级传递给子级。

您还可以通过在 spread 之后分配 prop 来覆盖它：

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

我也有 ViggoV 的方法。
为了澄清reactprops中的解构并知道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' }
                             */
   

➡️例子：展示传递的解构props的效果