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.children
na dowolnym pliku. Czy jestem niepewny?
W razie potrzeby można opublikować więcej kodu, ale po prostu zdziw się, jak reagują dzieci.
Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

props.children
jest ustawiane na zawartość bieżącego elementu.
<Outer>
{"hello!"}
</Outer>

W tym przypadku
Outer
this.props.children
to
„hello”
.
W Twoim przykładzie
this.props.children
jest
undefined
w
QuizBody
, ponieważ utworzony przez Ciebie element
QuizBody
nie zawiera żadnych treści. ..
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Biorąc pod uwagę następującą strukturę komponentów:
<Parent>
<Children/>
<Children/>
</Parent>

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">
<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]
<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>]https://cdnjs.cloudflare.com/a ... gt%3B[/url]
<div id="app">
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Czek

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'));

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się