'undefined'の小道具タイプを読み取ることができません

Question

私の子コンポーネントから親コンポーネントに単純なプロパティを渡そうとしています。なぜ私はこのエラーが発生しているのか理解できていません。私の反応を理解することは、どの関数やクラスでも小道具（this.props.text）を宣言して親に渡すことができることです。

Tickerbox.js（子）

import React from 'react'; 
import './App.css'; 
function Tickerbox(props) { 
return (
    <div className="container"> 
     <div className="row"> 
      <div className="col-sm-6"> 
       <h1></h1>; 
      </div> 
      <div className="col-sm-6"> 
       <h1>{this.props.text}</h1>; 
      </div> 
     </div> 
    </div> 
    ); 
} 


export default Tickerbox; 

App.js（親）

import React, { Component } from 'react'; 
import logo from './logo.svg'; 
import './App.css'; 
import Tickerbox from './TickerBox'; 


class App extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
    day: 'monday', 
    month: 'january', 
    year: '1st', 
}; 
} 


render() { 
    return (
     <div className="App"> 
     <link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"/> 
     <div className="App-header"> 
     <img src={logo} className="App-logo" alt="logo" /> 
     <h2>Hi</h2> 
     </div> 
     <div className="container"> 
     <div className="row"> 
      <div className="col-sm-2 col-sm-push-3">day</div> 
      <div className="col-sm-2 col-sm-push-3">month</div> 
      <div className="col-sm-2 col-sm-push-3">year</div> 
      <Tickerbox text="test"></Tickerbox> 
     </div> 
     </div> 
    </div> 
    ); 
} 
    } 

    export default App; 

Index.js（エントリポイント）

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 

ReactDOM.render(<App />, document.getElementById('root')); 
registerServiceWorker(); 

Answer 1

Tickerboxそれはstatelessコンポーネントです。

ステートレスコンポーネントは

あなたはthis.props.textにアクセスしようとしているが、すでに引数props

代わりに使用thisある渡さpropsを使用するので小道具を持つ関数として宣言されていますそのコンポーネントの実際の小道具

Tickerbox.js

import React from 'react'; 
import './App.css'; 
function Tickerbox(props) { 
return (
    <div className="container"> 
     <div className="row"> 
      <div className="col-sm-6"> 
       <h1></h1>; 
      </div> 
      <div className="col-sm-6"> 
       <h1>{props.text}</h1>; 
      </div> 
     </div> 
    </div> 
    ); 
} 


export default Tickerbox; 

Answer 2

問題機能コンポーネントでは、この.props.textにアクセスできません。それは、props.textか、それをクラスベースのコンポーネントにする必要があります。

<h1>{props.text}</h1>;