2016-06-21 5 views
0

以下の例のようにJSXのビットをまとめてReactJSコンポーネントを書く傾向があります。ReactJSでは、コードにバッキングインスタンスが含まれているため、refを使用できますか?

私は、私は疑問に思って何を「コンポーネントがバックアップインスタンスを持っていないので、参考文献は、ステートレス機能に添付することはできません」と言うその

をこのページhttps://facebook.github.io/react/docs/more-about-refs.htmlを読んで、私は私は手段を書いていたコードかどうかでありますバッキングインスタンスを持たないステートレスな関数を記述していますか?

それとも私のコードは、バッキングインスタンスを持っていないので、

のREF使用することができます私は、DOM要素へのREFを持ってできるようにしたいと思います:

<input 
     onChange={() = {console.log(e)} 
     ref=**some ref callback function** 
     value="rabbit" 
    /> 

しかし、これはことも可能である場合、私は疑問に思います私が取っているコーディングの方法を考えると、

例:

import React, {Component, PropTypes} from 'react' 

    export default class Blah extends React.Component { 

     constructor(props) { 
     super(props) 
     } 

     makeAnimal =() => { 
     let animaltype = 'furry' 
     if (animaltype === 'furry') { 
      return (
      <input 
       onChange={() = {console.log(e)} 
       value="rabbit" 
      /> 
     ) 
     } else { 
      return (
      <input 
       onChange={() = {console.log(e)} 
       value="fish" 
      /> 
     ) 
     } 
     } 

     makeForm =() => { 
     let section = {} 

     section.floob = (
      <input 
       onChange={() = {console.log(e)} 
       value="floob" 
      /> 
     ) 

     section.flub = (
      <input 
       onChange={() = {console.log(e)} 
       value="flub" 
      /> 
     ) 

     if (true) { 
      return (
      <div> 
       {section.flub} 
      </div> 
     ) 
     } else { 
      return (
      <div> 
       {section.floob} 
       {this.makeAnimal()} 
      </div> 
     ) 
     } 
     } 


     render() { 

     let section = {} 

     section.extras = (
      <div> 
      <h1> 
       The heading! 
      </h1> 


    </div> 
    ) 

    return (
     <div> 
     {section.extras} 
     {this.makeForm()} 
     </div> 
    ) 
    } 
} 
+0

なぜ純粋なHTMLの ''コンポーネントに 'ref'関数を付けたいのですか? – wintvelt

+0

私の間違い申し訳ありません。私はドキュメンテーションをもう一度見て、Ref要素をDom要素に付けることができます。私は自分の答えを取り除いた。 – wintvelt

答えて

1

あなたはそれゆえ、彼らはステートレスではないクラスを経由してあなたのコンポーネントを作成しています。ステートレスなコンポーネントのようなものになります。それは反応するコンポーネントではありませんようレフリーが動作するはず維持だから、あなたのコード内で

export default function Blah({ someProp, someOtherProp }) { 
    return (
     <div> 
      {someProp} 
     </div> 
    ); 
} 

を、しかし、<input>コンポーネントは以下wintveltの回答を参照してください、ステートレスです。

+0

それは変です。私はrefを使ってDOM要素にアクセスしようとすると、未定義になります –

+0

以下のwintveltのコメントを参照してください – Salakar

関連する問題