在反應中向子組件發送值

Question

我有一個組件，它接受一個可以是真或假的參數，我把它放在控制台中進行檢查。

console.log(isContract);
//can be true ou false

我需要通過將呈現另一個組件的表單發送此值。

這是父組件：

return (
    <Contract
      savingsFactors={formValues.savingsFactors}
      onFieldSubmit={...}
    />
)

在內部組件中，如果我來自其他組件的值是真實的，我需要更改項目

const Contract = ({ savingsFactors }) => (
      <PutField
        label={label}
        placeholder={placeholder}
        onBlur={...}

        // if isContract === true, return this:
        items={savingsFactors === 'true' ? FORM_VALUES : FORM_VALUES_NORMAL}

        // if isContract === false, return this:
        items={savingsFactors === 'true' ? ANOTHER_FORM_VALUES : ANOTHER_FORM_VALUES_NORMAL}
      />
);

將 isContract 發送到內部組件並根據結果加載項目的最簡單方法是什么？

我正在學習react，我遇到了很多麻煩，非常感謝幫助的人

Answer 1

我更熟悉 React 中定義的道具，但如果我沒記錯的話，這應該 go 是這樣的：

編輯 1在 Contract 組件中添加了一個渲染方法。

編輯 2我剛剛意識到您的合同組件 XD 中有一個組件，它應該在渲染方法本身內。 我認為這可能是問題所在。

 return ( <Contract savingsFactors={formValues.savingsFactors} isContract={isContract} onFieldSubmit={...} /> )

您的組件應該類似於（編輯 2 之后）：

 const Contract = (props) => ( render(){ let items = []; if (props.isContract === true) { items={props.savingsFactors === 'true'? FORM_VALUES: FORM_VALUES_NORMAL} } //BTW, should this be?== true: .P if (props.isContract === true) { items={props?savingsFactors === 'true': ANOTHER_FORM_VALUES. ANOTHER_FORM_VALUES_NORMAL} } return ( <div> <h2>I have {items.length} items... or something..?<h2> <PutField label={label} placeholder={placeholder} **items={items}** /*Maybe.*/ onBlur={..;} /> </div> ) } );