React children выдают ошибку PropTypes

Я хотел бы знать, как обрабатывать ошибку PropTypes при передаче компонента в качестве дочернего:

Failed prop type: The prop `value` is marked as required in `ChildComponent`, but its value is `undefined`.

Рендеринг работает, как ожидалось, и правильно передает свойство value.

Я полагаю, это происходит потому, что я помещаю компонент в функцию рендеринга компонента App без каких-либо реквизитов. Я передаю эти реквизиты ChildComponent только тогда, когда ParentComponent сопоставляется со своими дочерними элементами (то есть ChildComponent).

См. Код: https://codesandbox.io/embed/r70r5z3j9q

Есть ли способ предотвратить это? Как мне структурировать свои компоненты? Разве я не должен передавать компоненты в детстве?

EDITED: свойство "name" изменено на "value". Чтобы придать ему более общий вид. Я попытался упростить проблему в коде. Я знаю, что могу передать опору прямо в App. Вариант использования - когда родитель выполняет вычисления, и предполагается, что эти вычисления передаются потомку. Не зная явно, что это за дети. Вот почему я использую его в первую очередь в детстве.


reactjs javascript react-proptypes
person SlootSantos    schedule 09.05.2018    source источник
comment
В строке 7 ChildComponent.js вы устанавливаете свойство name как обязательное. name: PropTypes.string.isRequired. Либо укажите свойство в <ChildComponent /> index.js, либо не требуйте name prop.   -  person Gregg    schedule 09.05.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы используете cloneElement и передаете ему опору, а не исходный элемент. Чтобы исправить это, передайте props напрямую:

const App = () => (
  <div>
    <ParentComponent>
      <ChildComponent name="bob" />
    </ParentComponent>
  </div>
);

Вы можете легко передать компонент в качестве опоры (не дочерних элементов) вам ParentComponent и отобразить его только после того, как потребуются тяжелые вычисления:

const App = () => (
  <div>
    <ParentComponent component={ChildrenComponent} />
  </div>
);

const ParentComponent extends React.Component {
  state = { heavyComputationFinished: false } // initial state

  componentDidMount() {
    runYourHeavyComputations
      .then(() => { this.setState({ heavyComputationsFinished: true }) })
  }

  render() {
    const { component } = this.props
    const { heavyComputationsFinished, name } = this.state

    // return nothing if heavy computations hasn't been finished
    if (!heavyComputationsFinished) { return null }

    // we're getting this component (not its rendering call) as a prop
    return React.render(component, { name })
  }
}
person asiniy    schedule 09.05.2018
comment
Я знаю, что в этом примере может показаться ненужным добавлять опору в родительский элемент. Но что, если бы я проделал какие-то вычисления или сложную работу внутри родителя, который я хочу передать потомкам? - person SlootSantos; 09.05.2018
comment
@SlootSantos я изменил ответ - person asiniy; 09.05.2018
comment
Да! Это больше похоже на то, что я могу перенести на свою проблему! Большой! Спасибо! - person SlootSantos; 09.05.2018