React-motion div嵌套

以下是从github的demo0-simple-transition的代码。 Link 如何向移动div元素添加内容。希望使用这种变化来运行一个飞出菜单，但似乎无法弄清楚如何获取内容。感谢React-motion 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;

来源

2016-09-19 JGC

原来这就是被从你的动作做出反应组件返回 -

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

在反应过来，一个<div>可以写成<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>

来源

2016-09-19 18:45:48

谢谢汤姆，但是这并没有让我进入demo0-block。这只是另一个顶部。我正在跳跃嵌套其他元素，以便他们继承这个动作。 – JGC

汤姆感谢：要插入的孩子，把它变成一个普通的HTML格式div：<div>{children}</div>

在你的情况，这将是。你的回答是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>

来源

2016-09-21 14:03:18 JGC

React-motion div嵌套

回答

相关问题