JSXレンダリングされたhtml要素で "this"を使用できないのはなぜですか？

Question

私の質問は、JSX &の条件付きレンダリングについて、thisの使用です。それはコンポーネントが呼ばれると<li>タグを表示しますごと時間は適用されませんように私は条件付きでonMouseEnter属性をレンダリングしたい

render() { 
    return (
     <li onMouseEnter={this.mouseEnter}> 
      //things 
     </li> 
    ) 
    } 

：

は自分のアプリケーションを反応させるのに次のコードを考えてみましょう。例えば

：

render() { 
    return (
     <li {this.renderMouseEvents()} > 
      ... 
     </li> 
    ) 
    } 

しかし、Visual Studioは不平を言うと明らかにHTML要素の外側{ this.renderMouseEvents() }を呼び出す

がthisの使用を受け入れる "[JS]" ... "期待" と述べています。

thisがJSXのhtml要素内で無効なのはなぜですか？

JSXでこの条件付きレンダリングを行うには、適切で清潔な方法はありますか？

すべてのヘルプは高く評価され、感謝！

Answer 1

何が書かれていることは、有効なJSXの構文ではありません。代わりに次を試してください。

mouseEnterBehaviorEnabled()は、trueまたはfalseを返す関数です。ここでは、mouseEnterをトリガーするときのロジックを設定します。

MDNのShort circuit evaluationをご覧ください。あなたはもちろん、単に

render() { 
    return (
    <li onMouseEnter={this.mouseEnter} > 
     ... 
    </li> 
); 
} 

を行うと、元の動作の残りの部分の前にmouseEnter内のロジックを実行することができ

render() { 
    return (
    <li onMouseEnter={this.mouseEnterBehaviorEnabled() && this.mouseEnter} > 
     ... 
    </li> 
); 
} 

---

。これらの条件が満たされない場合は、falseを返し、残りは実行されません。

Answer 2

JSXでthisを使用できますが、これは問題ではないと思います。

thisは問題がある場合、それは、あなたの方法renderMouseEvents内側にあることがありますが、それはthisにbindたのですか？

しかし、あなたの方法renderMouseEventsが返ってきているので、それは動作しないと思います。しかし、役立つこと、これをチェックアウト、プロパティを注入することが可能である：

Dynamic attribute in ReactJS

Answer 3

属性だけにあなたの条件を挿入します。

import noop from 'lodash/noop'; 

render() { 
    return (
     <li onMouseEnter={ifSatisfies ? this.mouseEnter : noop}> 
      //things 
     </li> 
    ) 
    } 

Answer 4

あなたはスプレッド演算子（ES6）を使用して、論理AND短絡評価によってそれを行うことができます。

...{ onClick: condition && this.handleClick } 

例：

const arr = ["1", "2", "3"]; 
 

 
class App extends React.Component { 
 
    constructor(props) { 
 
    super(props); 
 
    } 
 

 
    handleClick = e => { 
 
    console.log(e.target.innerHTML); 
 
    }; 
 

 
    render() { 
 
    return (
 
     <div> 
 
     {arr.map(o => { 
 
      const myProps = { 
 
      ...{ onClick: o != "1" && this.handleClick } 
 
      }; 
 
      return (
 
      <li {...myProps}> 
 
       {o} 
 
      </li> 
 
     ); 
 
     })} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>

Answer 5

もし私があなたが尋ねていることを理解している、私はあなたが走っている問題はJSX JavaScriptに変換します。

React.createElement('li', { { onMouseEnter: this.mouseEnter } }, '...'); 

この：何が書かれていることはおそらくあなたのrenderMouseEvents()戻り{ onMouseEnter: this.mouseEnter }を想定し、このように翻訳しようとする

React.createElement('el', { arg1: '1', arg2: '2' }, '3'); 

：

<el arg1="1" arg2="2">3</el> 

は、次のようなものに変換されますJavaScriptが無効です。コンパイラは...（JavaScriptの普及構文）を予期していますが、この問題を解決する可能性があります。

noppaが述べたように、あなたが望むものを達成するためのより良い方法があるかもしれません。あなたは直面している問題についてより具体的になることができますか？