this.propsは定義されていないと思われますが、私は理由を理解できません

Question

私はReact jsに非常に新しく、ユーザーがテキスト入力にテキストを入力すると非常に簡単な操作をしようとしていますその上のpタグは、ユーザーが入力しているときに変更する必要があります。ここに関連するコードです：「../style/base.scss'から

index.js

import { render } from 'react-dom' 
import App from './components/App' 

var Name = React.createClass({ 
getInitialState: function() { 
    return {name: ''} 
}, 
changeName: function(event) { 
    this.setState({ 
     name: event.target.value 
    }); 
}, 
render: function() { 
    return (
       <div> 
        <p>Your name is: {this.state.name}</p> 
        <App setName={this.changeName} /> 
       </div> 
      ) 
    } 
}); 

render((<Name />), document.getElementById('content')); 

App.js 輸入スタイルは、

export default function() { 
    return (
       <div> 
        <input type="text" placeholder="Enter text!" className="fancy" onChange={this.props.setName} /> 
       </div> 
    ); 
} 

これはうまくいくと思っていましたが、何もページに表示されません。ブラウザでコンソールを確認すると、「キャッチされていないタイプのエラー：「未定義の」のプロパティ 'props'を読み取ることができません。これは、 "this"オブジェクトが定義されていないことを意味する必要がありますが、私は理由理由を考えることができません。私はes6のクラス構文を使わなかったので、 "これ"はうまくいくと思った。誰かが何が起こっているか教えてもらえますか？これを見て喜んで誰でも前にありがとうございます。

Answer 1

ステートレス機能コンポーネントとしてApp.jsを使用しています。彼らはthisを持っていません。代わりに、小道具はあなたの関数にオブジェクトパラメータとして渡されます。あなたはどちらかあなたの関数で（例えばpropsなど）のオブジェクトを受け入れ、props.setNameにアクセスすることによりこの問題を解決することができます。または、非構造とそれを引き出し、このようにあなたの関数を定義することができます。export default function({ setName }) {、その後setNameの代わりthis.props.setName