在React中的this.props.children上調用setState或其他方法是一種好習慣嗎？

Question

在我的理解中， 道具是由父母設置的，而狀態是由組件私有的。

this.state對組件是私有的，可以通過調用this.setState（）進行更改。 更新狀態后，組件將重新渲染自身。

父組件永遠不要在其子組件上調用setState 。 這個對嗎？

想象一下，父<Form>在提交時具有某種驗證機制，並且希望傳遞所有<FormInput>的驗證錯誤。 它應該通過道具執行此操作，還是可以在其子級上調用setState ？

最后，在子組件上調用任何內容是否是一種好習慣？

考慮以下方法：

validate: function () {
  var hasError = false;

  React.Children.forEach(this.props.children, function(child) {
    if (child.validate) {
      hasError = hasError || child.validate();
    }
  });

  return !hasError;
}

它可以工作，但是我不確定在React中可以使用鴨類兒童方法 。
你怎么看？

Answer 1

這不是一個好主意。

對於驗證示例，盡管如果您的表單包含幾個直接子組件也可以使用，但是如果您也想驗證<div>字段怎么辦？ 他們不會是直系子女，所以現在您的邏輯約束了您的標記。

一種實現您想要的方式的方法是，通過給孩子一個特殊的對象 ， 使孩子能夠准確地控制他們需要的父母狀態 。 React有一個內置的例子： ReactLink和LinkedStateMixin 。

您可以采用相同的想法並將其應用於驗證。

Answer 2

react中的每個組件都是獨立的，每個組件應保持自己的狀態，而不是其他狀態。 他們只能將道具發送到其他組件，並且其他組件可以決定是否更新其狀態。 因此，將道具發送給孩子而不是調用孩子的setState是更好的做法。

但是，根據您在表單驗證情況下的問題，如果表單已提交且表單無效，則表單會在其每個輸入字段上觸發Invalid事件。

因此，您可以編寫函數來處理每個孩子上的無效事件，因此，您也不必將道具從父對象傳遞給孩子。