使用扩展运算符对propsJSX 内的对象做出react似乎不会输出我期望的内容。
<Text {...this.props} />
似乎被渲染成style="foo"，它应该style:"foo"是记录在这里。我在任何地方都找不到这个文档。我对 react 完全陌生，我正在尝试理解语法，并想知道 react 是否在内部执行了这样的未记录的事情。
一个简单的测试突显了我的困惑：
const x = {...{test:1}}.test;
alert(x);
被警告
1
这肯定不会编译：
<Text test: 1 />
这是在阵营文档记录在这里。
要在此处复制粘贴，它指出：
如果你已经有 props 作为对象，并且你想在 JSX 中传递它，你可以使用 ... 作为“传播”操作符来传递整个 props 对象。
它是完全有效的、记录在案的 JSX。
此外，它们提供了将 props 传递给组件的两种不同方法的示例——一种作为离散属性，一种作为传播对象——并注意，就接收 props 的组件而言，它们是相同的：
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
将此扩展到上面的示例，您可以将这两个视为等效：
function App1() {
return <Text test={1} />;
}
function App2() {
const props = {test: 1};
return <Text {...props} />;
}
至于它在引擎盖下如何工作的细节，请记住这是一个转译，所以我们不需要过多关注它在引擎盖下的工作方式——只要你知道它们是等价的，一个是“捷径”，你应该没问题。
还值得注意的是，文档规定应该谨慎使用传播方法，因为“传播属性可能很有用，但它们也使将不必要的props传递给不关心它们的组件或将无效的 HTML 属性传递给组件变得容易多姆。”
希望这有助于为您澄清事情！
解构从对象中提取键值对。
看看这个例子
const obj = {
a: 'a',
b: 'b'
}
现在，解构obj将导致
const { a, b } = obj;
console.log(a); // 'a'
console.log(b); // 'b'
如果你在作为 React 组件的 props 传递时解构了一个对象，就会发生这种情况
<Component {...obj} />
这将在内部转换为
<Component a={a} b={b} />
因此，如果您将样式作为props传递给组件，则应该这样做
const style = {
background:'yellow'
}
<Component style={style} />
或者
const obj = {
style = {
background:'yellow'
}
}
<Component {...obj} />