是否必須傳遞道具來反應功能組件？

Question

我有一個功能反應組件。 它不使用任何道具，它只返回元素。 我還有道具嗎？ 那有什么協議嗎？ 以下代碼是否有效的React代碼？

const HelloComponent = () => (
    <div>Hi!</div>
);

Answer 1

它完全有效，不需要道具。 它與任何其他函數相同，如果它沒有參數，不要給它任何。 :-)

Answer 2

由於功能反應組件只是javascript函數，因此它們對任何函數都適用相同的規則。 您可以安全地省略未使用的參數。

Answer 3

不，你沒有。 props顯式傳遞給每個組件。 如果您不使用它的任何property ，請不要聲明它。 完全像你的例子。 考慮以下

const App = () => <Child />

const Child = props => {
    console.log(props) // { }
    return <div>hey</div>
}

在這種情況下， props只是一個空Object ，不需要聲明argument 。 如果您不需要閱讀它，請不要提及它

const Child = () => <div>hey</div>

Answer 4

模式A.

// span on single line and returns by default..
const Test = () => <div>Hello</div>

模式B.

// span on multiple lines, still returns by default a single node
const Test = () => 
 <div>
  Hello
 </div>

模式C.

//span on multiple lines, but grouped by a paranthesis
const Test = () => (
 <div>
  Hello
 </div>
)

錯誤..

//tryin to group with braces..
const Test = () => {
 <div>
  Hello
 </div>
}

模式D：

// group by braces, so you have to return explicitly
const Test = () => {
 const greeting = 'hello'

 return (
  <div>
   {greeting}
  </div>
 )
}

注意：無法在react中返回多個節點。 所有節點必須有一個父節點作為它的根。 為什么{}大括號失敗是因為它用於組合多個節點或代碼片段。

//容器//從另一端構造道具

 render() {
    const obj = {
     name: 'john',
     isAdmin: true,
    }

  return <Child {..{ obj }} {...this.props} />
 }

//孩子：從這里解構

const Child = ({ obj, ...props }) => {
 const { value1-in-props, value2-in-props } = props
}

//容器//發送時的結構

 render() {
    const obj = {
     name: 'john',
     isAdmin: true,
    }

  return <Child {..obj} {...this.props} />
 }

//孩子：破壞

const Child = ({ name, isAdmin, ...props }) => {}