React的道具与其值相同

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

I had a slight epiphany when reading these answers. Since in ES6+ you can add an existing variable to an object like this:

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

That means you can add a named prop to a React component like:

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

这是一个很好的解决方案。 (3认同)
非常值得注意的是，这每次都会克隆道具。如果道具是嵌套对象并且频繁重新渲染，这可能会很昂贵。 (3认同)
为此+1。我自己也有同样的想法。就我而言`<DifficultySelector {...{difficultyView, setDifficultyView }} />` (2认同)

Answer 3

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

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

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

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

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

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

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