Ich versuche das Rendern von Requisiten zu üben, aber ich habe einen Fehler von

this.props.children ist keine Funktion

Das ist mein Code

import React from 'react';
import { render } from 'react-dom';


const Box = ({color}) => (
  <div>
    this is box, with color of {color}
  </div>
);

class ColoredBox extends React.Component {
  state = { color: 'red' }
  getState() {
    return {
      color: this.state.color
    }
  }
  render() {
    return this.props.children(this.getState())
  }
}

render(<ColoredBox><Box /></ColoredBox>, document.getElementById('root'));

https://codesandbox.io/s/8z0xmk9ojl

7
Madeline Ries 18 Apr. 2018 im 08:37

3 Antworten

Beste Antwort

Wenn Sie dem Muster der Render-Requisiten folgen, müssen Sie Ihre Kinder als Funktion haben, damit Sie tatsächlich schreiben können

import React from 'react';
import { render } from 'react-dom';


const Box = ({color}) => (
  <div>
    this is box, with color of {color}
  </div>
);

class ColoredBox extends React.Component {
  state = { color: 'red' }
  getState() {
    return {
      color: this.state.color
    }
  }
  render() {
    return this.props.children(this.getState())
  }
}

render(<ColoredBox>{(color) => <Box color={color}/>}</ColoredBox>, document.getElementById('root'));

Um dies zu verdeutlichen, wird eine zustandslose Funktionskomponente nicht wie eine Funktion behandelt, wenn Sie sie wie <Box/> rendern.

Sie können jedoch die oben genannte zustandslose Funktionskomponente wie verwenden

<ColoredBox>{Box}</ColoredBox>

Und es würde funktionieren

Demo

3
Shubham Khatri 18 Apr. 2018 im 05:50

Sie übergeben ein Reaktionsobjekt als Requisiten:

(<ColoredBox><Box /></ColoredBox>)

Daher ist es keine Funktion.

Verwenden:

render() {
    return this.props.children
}

ODER, wenn Sie möchten, können Sie eine Funktion als Kinder-Requisite (Render-Requisiten) übergeben:

<ColoredBox>
  {state => <Box />}
</ColoredBox>

render() {
  return this.props.children(this.state)
}
0
Tomasz Mularczyk 18 Apr. 2018 im 05:48

Wie der Fehler besagt, handelt es sich bei this.props.children nicht um eine Funktion oder React Class (eine Funktion), sondern um ein Objekt, das durch Aufrufen dieser Funktion erstellt wurde.

Sie können dies verwenden, um das Problem zu beheben

render() {
 return React.cloneElement(this.props.children, this.getState())
}

Dadurch wird das Kind mit zusätzlichen Requisiten geklont.

4
ssk 18 Apr. 2018 im 05:47