React.props.children jest niezdefiniowana
Nadal nie jestem do końca pewien, jak reagują rodzice/dzieci.
Mam komponent o nazwie
quiz, który pobiera mój komponent
quizBody
<div className="quizContainer">
[b]{this.props.quizName}[/b]>
<QuizBody
quizName={this.props.quizName}
time={this.props.time}
start={this.startQuiz}
disabled={this.state.disabled}
onEnter={this.onEnter}
handleEnteredValue={this.handleEnteredValue}
youWon={this.state.youWon}
/>
więc założyłem, że quiz będzie rodzicem quizBody? ale kiedy dzwonię do
this.props.childrenna dowolnym pliku. Czy jestem niepewny?
W razie potrzeby można opublikować więcej kodu, ale po prostu zdziw się, jak reagują dzieci.
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
3 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
W tym przypadkuto.
W Twoim przykładziejestw, ponieważ utworzony przez Ciebie elementnie zawiera żadnych treści. ..
Anonimowy użytkownik
Potwierdzenie od:
Element rodzicielski dwojga dzieci (dziecko).
Jeden przypadek użycia dla React.children wygląda następująco:
<div class="snippet-code">
<div class="snippet" data-babel="true" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
class Parent extends React.Component {
render() {
console.log(this.props.children);
return ( <div>
{ this.props.children }
)
}
}const Child = () => <div>Helloconst Family = () => <Parent>
<Child/>
<Child/>
</Parent>ReactDOM.render(<Family/>,
document.getElementById('app'))
<pre class="snippet-code-html lang-html prettyprint-override">
Anonimowy użytkownik
Potwierdzenie od:
ten przykład
https://jsfiddle.net/jmxgp5pp/
zrozumieć, jak działają „dzieci”.
var Parent = React.createClass({
render: function() {
return ( <div>
{this.props.children.map(child => <div>
Child: {child}
)}
<span>I'm not a child</span>
);
}
});var Child = React.createClass({
render: function() {
return ( <span> I'm {this.props.name} </span>
);
}
});ReactDOM.render( <Parent>
<Child name="one"/>
<Child name="two"/>
</Parent>
,
document.getElementById('container'));