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
3 Antworten
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
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)
}
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.