傳/訪問道具無國籍子組件

Question

我知道你可以通過所有一個反應的組分道具到它的子組件是這樣的：

const ParentComponent =() => (
    <div> 
    <h1>Parent Component</h1> 
    <ChildComponent {...this.props} /> 
    </div> 
) 

但你怎麼然後檢索這些道具，如果孩子組件是無狀態？我知道如果它是一個類組件，你可以直接訪問它們作爲this.prop.whatever，但是你將什麼作爲參數傳遞給無狀態組件？

const ChildComponent = ({ *what goes here?* }) => (
    <div> 
     <h1>Child Component</h1> 
    </div> 
) 

Answer 1

你在尋找es6命名參數的語法（這只是解構）？

const ChildComponent = ({ propName }) => (
    <div> 
    <h1>Child Component</h1> 
</div> 
) 

const ChildComponent = (props) => (// withoud named, arguments 
    <div> 
    <h1>Child Component</h1> 
</div> 
) 

Optionnally有第二個參數給你的函數取決於你是否指定了背景您的組件或不是。

也許它會更有幫助的一個鏈接到docs。如第一篇文章中所述功能組件。無論傳遞給組件的道具是作爲第一個參數傳遞給您的功能組件的對象來表示的。

進一步說一下，關於jsx中的傳播符號。

當你在組件中寫：

<Child prop1={value1} prop2={value2} /> 

你的組件將獲得是一個普拉伊物體看起來像這樣：

{ prop1: value1, prop2: value2 } 

（請注意，這不是一個地圖，但與對象只有字符串作爲鍵）。

因此，當你使用傳播語法與JS對象時，它實際上是一個快捷方式到這個

const object = { key1: value1, key2: value2 } 
<Component {...object}/> 

是相當於

<Component key1={value1} key2={value2} /> 

而實際上編譯成

return React.createElement(Component, object); // second arg is props 

你當然可以有t wo語法，但要小心順序。更具體的語法（prop = value）必須最後一個：更具體的指令最後一個來。

如果你這樣做：

<Component key={value} {...props} /> 

它編譯成

React.createElement(Component, _extends({ key: value }, props)); 

如果你這樣做（你應該是什麼）

<Component {...props} key={value} /> 

它編譯成

React.createElement(Component, _extends(props, { key: value })); 

其中extends是* Object。分配（或者如果不存在則填充）。

要走得更遠我真的會建議花一些時間去觀察巴別爾的輸出online editor。瞭解jsx如何工作，以及更一般地瞭解如何使用es5工具實現es6語法，這非常有趣。

Answer 2

當你寫

const ChildComponent = ({ someProp }) => (
    <div> 
     <h1>Child Component {someProp}</h1> 
    </div> 
) 

從所有要傳遞到childComponent你只是解構只得到someProp道具。如果您希望在ChildComponents中使用的道具的數量在可用道具的總數中是可數（少數），則解構是一個不錯的選擇，因爲它提供了更好的可讀性。

假設你要訪問的子組件中的所有道具，那麼你不需要使用周圍參數{}，然後你可以使用它像props.someProp

const ChildComponent = (props) => (
    <div> 
     <h1>Child Component {props.someProp}</h1> 
    </div> 
) 

Answer 3

但你怎麼然後檢索這些道具如果子組件是無狀態的？

const ChildComponent = ({ *what goes here?* }) => (
    <div> 
     <h1>Child Component</h1> 
    </div> 
) 

---

ChildComponent持有的名稱和props將在箭頭函數的語法，就像你所需要的參數：

const ChildComponent = props => (
    <div> 
    <p>{props.value ? props.value : "No value."}</p> 
    </div> 
); 

如果巴別塔，它會造成什麼樣此：

var ChildComponent = function ChildComponent(props) { 
    return React.createElement(
    "div", 
    null, 
    React.createElement(
     "p", 
     null, 
     props.value ? props.value : "No value." 
    ) 
    ); 
}; 

Answer 4

For由於某種原因，似乎什麼工作對我來說是一個Shubham's answer above變化：

const ChildComponent = props => (
    <div> 
     <h1>Child Component {props[0].someProp}</h1> 
    </div> 
) 

Answer 5

我想我會添加一個簡單的ES2015，解構語法我用的是從功能的父母通過所有道具的功能子組件。

const ParentComponent = (props) => (
    <div> 
    <ChildComponent {...props}/> 
    </div> 
); 

或者，如果我有多個對象（父母，再加上其他任何道具），我想傳遞給孩子當道具：

const ParentComponent = ({...props, ...objectToBeAddedToChildAsProps}) => (
    <div> 
    <ChildComponent {...props}/> 
    </div> 
); 

這解構語法類似於上述的答案，但這是我從功能組件傳遞道具的方式，我認爲它非常乾淨。我希望它有幫助！

Answer 6

這是減少代碼膨脹的好方法。下面是一個例子與ParentClass.js：

import React from 'react'; 
import SomeComponent from '../components/SomeComponent.js'; 

export default class ParentClass extends React.Component { 
    render() { 
     <div> 
      <SomeComponent 
       {...this.props} 
      /> 
     </div> 
    } 
} 

如果我這樣做，<ParentClass getCallBackFunc={() => this.getCallBackFunc()} />，或者如果我這樣做<ParentClass date={todaysdatevar} />，道具getCallBackFunc或date將提供給SomeComponent類。

來源：https://zhenyong.github.io/react/docs/transferring-props.html

Answer 7

const ParentComponent = (props) => (
    <div> 
    <h1>Parent Component</h1> 
    <ChildComponent {...props} /> 
    </div> 
); 

const ChildComponent = ({prop1, ...rest}) =>{ 
    <div> 
    <h1>Child Component with prop1={prop1}</h1> 
    <GrandChildComponent {...rest} /> 
    </div> 
} 

const GrandChildComponent = ({prop2, prop3})=> { 
    <div> 
    <h1>Grand Child Component with prop2={prop1} and prop3={prop3}</h1> 
    </div> 
}