React-motion div 嵌套

Question

这是来自 github 的 demo0-simple-transition 的代码。 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

这就是您的 React Motion 组件返回的内容 -

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

在 React 中，如果没有 children，<div> 可以写成 <div/>。要插入 children，请将其转换为正常的 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>

React-motion div 嵌套

React-motion div nesting

jsx

reactjs

react-motion