最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - React.props.children is undefined - Stack Overflow

programmeradmin5浏览0评论

Im still not quite sure how reacts parents/children work.

I have a ponent called quiz which pulls in my quizBody ponent

<div className="quizContainer">
  <h1>{this.props.quizName}</h1>
  <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}
  />
</div>

so I assumed that quiz would be the parent of quizBody? but when I call this.props.children in either file. I get undefined? can post more code if necessary but just confused as to how children work in react.

Im still not quite sure how reacts parents/children work.

I have a ponent called quiz which pulls in my quizBody ponent

<div className="quizContainer">
  <h1>{this.props.quizName}</h1>
  <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}
  />
</div>

so I assumed that quiz would be the parent of quizBody? but when I call this.props.children in either file. I get undefined? can post more code if necessary but just confused as to how children work in react.

Share Improve this question edited Jun 21, 2017 at 21:34 iagowp 2,4942 gold badges23 silver badges32 bronze badges asked Jun 21, 2017 at 21:13 The wormThe worm 5,88814 gold badges40 silver badges51 bronze badges 3
  • You can think of props as the attributes or properties within a tag and props.children as the content between the tags. Here your QuizBody doesn't have any content between the tag, so naturally it's undefined or null. In the DOM, the content between the tags is considered a child node. – Charles Owen Commented Jun 21, 2017 at 21:22
  • basically inside my quizBody ponent, i have an input box with a ref tag. how can I get access to that ref tag? – The worm Commented Jun 21, 2017 at 21:24
  • ref={ref => this.inputRef = ref}, then elsewhere in QuizBody you can refer to this.inputRef. – Mike Commented Jun 21, 2017 at 21:35
Add a ment  | 

3 Answers 3

Reset to default 3

props.children is set to the current element's content.

<Outer>
  {"hello!"}
</Outer>

In this case, Outer's this.props.children is"hello".

In your example this.props.children is undefined in QuizBody because the QuizBody you created has no content.

Given the following ponent structure:

<Parent>
    <Children />
    <Children />
</Parent>

The ponent Parent has 2 children (Child).

One use case of React.children is as follows:

class Parent extends React.Component {
  render() {
    console.log(this.props.children);
    return (
      <div>
        { this.props.children } 
      </div>
    )
  }
}

const Child = () => <div>Hello</div>

const Family = () => <Parent>
  <Child/>
  <Child/>
</Parent>

ReactDOM.render(<Family />, 
document.getElementById('app'))
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Check this sample to understand how 'children' work.

var Parent = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.children.map(child => <div>
            Child: {child}
        </div>)}
        <span>I'm not a child</span>
      </div>
    );
  }
});

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')
);
发布评论

评论列表(0)

  1. 暂无评论