React.js:将一个组件包装到另一个组件中

NVI

许多模板语言都有“ slots”或“ yield”语句,允许进行某种形式的控制反转,以将一个模板包装在另一个模板中。

Angular具有“ transclude”选项

Rails有收益声明如果React.js拥有yield语句,它将看起来像这样:

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          <yield/>
        after
      </div>
    );
  }
});

var Main = React.createClass({
  render: function() {
    return (
      <Wrapper><h1>content</h1></Wrapper>
    );
  }
});

所需的输出:

<div class="wrapper">
  before
    <h1>content</h1>
  after
</div>

React,React.js没有<yield/>如何定义包装器组件以实现相同的输出?

索菲·阿尔珀特(Sophie Alpert)

尝试:

var Wrapper = React.createClass({
  render: function() {
    return (
      <div className="wrapper">
        before
          {this.props.children}
        after
      </div>
    );
  }
});

有关更多信息,请参见文档中的多个组件:子代子代道具类型

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在React中渲染另一个组件

来自分类Dev

如何将状态className变量传递给React中的另一个组件

来自分类Dev

将内容从一个React组件注入到另一个onClick

来自分类Dev

React Native将Text组件添加到另一个Text组件中

来自分类Dev

如何在React.js中从一个组件(子组件)到另一个组件(父组件)获取值?

来自分类Dev

将道具传递到React.js中的另一个组件

来自分类Dev

如何将一个React-Admin组件嵌入另一个组件中;多个管理组件

来自分类Dev

将TypeScript React组件嵌套在另一个组件中

来自分类Dev

React组件中另一个文件中的React JS调用函数

来自分类Dev

如何在React中从另一个组件设置一个组件的状态

来自分类Dev

React:将每3个组件包装到一个div中

来自分类Dev

在React.Js中创建一个组件作为另一个组件的子组件

来自分类Dev

我如何从React JS中的另一个组件路由

来自分类Dev

React JS将click事件传递给另一个组件

来自分类Dev

React Native将一个组件插入另一个

来自分类Dev

React-如何将API数据从一个组件传递到另一个js文件中的另一个组件?

来自分类Dev

修改React.js中另一个组件中一个组件的HTML元素

来自分类Dev

修改React.js中另一个组件中一个组件的HTML元素

来自分类Dev

修改React.js中另一个组件中一个组件的HTML元素

来自分类Dev

从另一个组件获取参数[React JS]

来自分类Dev

React Native将Text组件添加到另一个Text组件中

来自分类Dev

将一个React组件作为参数传递给另一个React组件

来自分类Dev

在react中动态添加另一个组件

来自分类Dev

在 React 中的另一个组件中动态渲染一个组件

来自分类Dev

如何将组件作为道具传递给 react js 中的另一个组件?

来自分类Dev

如何将表单输入字段传递给 React 中的另一个组件?

来自分类Dev

React Native - 将数据从一个组件传递到另一个

来自分类Dev

React:在另一个组件中使用组件

来自分类Dev

从另一个组件 React js 设置状态

Related 相关文章

  1. 1

    在React中渲染另一个组件

  2. 2

    如何将状态className变量传递给React中的另一个组件

  3. 3

    将内容从一个React组件注入到另一个onClick

  4. 4

    React Native将Text组件添加到另一个Text组件中

  5. 5

    如何在React.js中从一个组件(子组件)到另一个组件(父组件)获取值?

  6. 6

    将道具传递到React.js中的另一个组件

  7. 7

    如何将一个React-Admin组件嵌入另一个组件中;多个管理组件

  8. 8

    将TypeScript React组件嵌套在另一个组件中

  9. 9

    React组件中另一个文件中的React JS调用函数

  10. 10

    如何在React中从另一个组件设置一个组件的状态

  11. 11

    React:将每3个组件包装到一个div中

  12. 12

    在React.Js中创建一个组件作为另一个组件的子组件

  13. 13

    我如何从React JS中的另一个组件路由

  14. 14

    React JS将click事件传递给另一个组件

  15. 15

    React Native将一个组件插入另一个

  16. 16

    React-如何将API数据从一个组件传递到另一个js文件中的另一个组件?

  17. 17

    修改React.js中另一个组件中一个组件的HTML元素

  18. 18

    修改React.js中另一个组件中一个组件的HTML元素

  19. 19

    修改React.js中另一个组件中一个组件的HTML元素

  20. 20

    从另一个组件获取参数[React JS]

  21. 21

    React Native将Text组件添加到另一个Text组件中

  22. 22

    将一个React组件作为参数传递给另一个React组件

  23. 23

    在react中动态添加另一个组件

  24. 24

    在 React 中的另一个组件中动态渲染一个组件

  25. 25

    如何将组件作为道具传递给 react js 中的另一个组件?

  26. 26

    如何将表单输入字段传递给 React 中的另一个组件?

  27. 27

    React Native - 将数据从一个组件传递到另一个

  28. 28

    React:在另一个组件中使用组件

  29. 29

    从另一个组件 React js 设置状态

热门标签

归档