単純な反応の例を表示できません

Question

const HiContainer => (props) { 
    render{ 
    return(
     <h1>Hi {this.props.greet}</h1> 
    ) 
    } 
} 

ReactDOM.render(
    <HiContainer greet="hi"/> 
    document.getElementById('root') 
); 

このコードの何が問題なのですか？それはデバッグするのは難しい私はどのラインがコンソールに問題があるか見ることができません。

また、いつconstructorを使用する必要がありますか？

Answer 1

問題は、arrow関数を間違った方法で使用していることです。

const HiContainer =() => {}のようになります。これを試してみてください 、それは動作します：あなたはstateless componentsを使用しているので、

const HiContainer = (props) => { 
    return(
     <h1>Welcome {props.greet}</h1> 
    ) 
} 

ReactDOM.render(
    <HiContainer greet="hi"/>, 
    document.getElementById('app') 
); 

constructorはあなたがstateful componentsを使用する際に必要とされ、状態変数に情報を格納し、constructorは必要ありません。ワーキング例えば

チェックjsfiddle：ステートレス機能コンポーネントのhttps://jsfiddle.net/ej2szg3a/

チェックこれを：https://www.reactenlightenment.com/react-state/8.4.html

Answer 2

あなたはrenderメソッドを自動的に処理する機能コンポーネントを使用しているようです。

コードは次のようになります。

const HiContainer = (props) => (
    <h1>Hi {props.greet}</h1> 
) 

あなたがコンポーネントにライフサイクルメソッドを追加したい場合は、クラスコンポーネントに変換する必要があります。

Answer 3

あなたは、いくつかの構文エラーを持って、

const HiContainer = (props) => { 
    return(
    <h1>Hi {props.greet}</h1> 
) 
} 

であるべきとに簡素化することができます。

const HiContainer = props => <h1>Hi {props.greet}</h1> 

あなたは基礎から学ぶ必要があり、これは、矢印関数です： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions