リアクションモーションdivのネスト

Question

ここからコードはdemo0-githubからの簡単な移行です。 Link どのようにコンテンツを移動div要素に追加しますか？ フライアウトメニューを実行するためにこのバリエーションを使用したいと考えていましたが、内部のコンテンツを取得する方法を見つけることができませんでした。 おかげ

import React from 'react'; 
import {Motion, spring} from '../../src/react-motion'; 

const Demo = React.createClass({ 
    getInitialState() { 
return {open: false}; 
    }, 

    handleMouseDown() { 
this.setState({open: !this.state.open}); 
    }, 

    handleTouchStart(e) { 
e.preventDefault(); 
this.handleMouseDown(); 
    }, 

    render() { 
return (
    <div> 
    <button 
     onMouseDown={this.handleMouseDown} 
     onTouchStart={this.handleTouchStart}> 
     Toggle 
    </button> 

    <Motion style={{x: spring(this.state.open ? 400 : 0)}}> 
     {({x}) => 
     // children is a callback which should accept the current value of 
     // `style` 
     <div className="demo0"> 
      <div className="demo0-block" style={{ 
      WebkitTransform: `translate3d(${x}px, 0, 0)`, 
      transform: `translate3d(${x}px, 0, 0)`, 
      }} /> 
     </div> 
     } 
    </Motion> 
    </div> 
); 
    }, 
}); 

export default Demo; 

Answer 1

だからこれはあなたの運動成分に反応から返されているものである -

<div className="demo0"> 
    <div className="demo0-block" style={{ 
     WebkitTransform: `translate3d(${x}px, 0, 0)`, 
     transform: `translate3d(${x}px, 0, 0)`, 
     }} /> 
    </div> 

では、それが子を持​​たない場合<div>は<div/>のように書くことができ、反応します。子どもを挿入するには、通常のHTML形式divにそれを回す：あなたのケースで<div>{children}</div>

が、それは次のようになります。

<div className="demo0"> 
     <div className="demo0-block" style={{ 
     WebkitTransform: `translate3d(${x}px, 0, 0)`, 
     transform: `translate3d(${x}px, 0, 0)`, 
     }} > 
    {/* Children elements here */} 
    </div> 
</div> 

Answer 2

トムのおかげで再び。答えは99％でしたが、中括弧{}は必要ありません。開いたdivタグを閉じるだけでよいのです。そしてdivを正常に閉じます。そして、以下のように要素を追加し始めます。これが本当なら-100％正しいとすれば

<Motion style={{x: spring(this.state.open ? 400 : 0)}}> 
    {({x}) => 
    // children is a callback which should accept the current value of 
    // `style` 
    <div className="demo0"> 
     <div className="demo0-block" style={{ 
     WebkitTransform: `translate3d(${x}px, 0, 0)`, 
     transform: `translate3d(${x}px, 0, 0)`, 
     }}> 
       <div><h1>Lots of stuff can go in here  
           here now!</h1></div> 
      </div> 
    } 
</Motion>