react通过父组件渲染子组件中的内容

  • 说明:
  • 代码:
    // less
    require (‘./static/less/index.less‘)
    // 核心
    var React = require(‘react‘)
    var ReactDom = require(‘react-dom‘)
    var ReactRouter = require(‘react-router-dom‘)
    var Router = ReactRouter.BrowserRouter
    var Route = ReactRouter.Route
    var Link = ReactRouter.Link
    var CreateClass = require(‘create-react-class‘)
    var PropTypes = require(‘prop-types‘)
    var Ajax = require(‘dollarphp-ajax‘)
    // 创建组件
    var Index = CreateClass({
    render:function(){
        return (
            <Head>
                <div>
                    hello world
                </div>
            </Head>
        )
    }
    })
    var Head = CreateClass({
    render:function(){
        return (
            <div>
                {this.props.children}
            </div>
        )
    }
    })
    // 渲染
    ReactDom.render(
         <Index/>,
         document.getElementById(‘app‘)
    )
  • 效果:
  • 原文地址:http://blog.51cto.com/12173069/2112503

    时间: 2024-10-07 05:47:06

    react通过父组件渲染子组件中的内容的相关文章

    react 父组件向子组件传递函数

    这段时间一直在使用react,由于这react是单向数据绑定,总感觉有点不适用,毕竟之前一直都在使用angular,但学习还是要继续,做了一个迭代的项目,都差点忘记要总结一下这个react了,现在可以写点东西了.(react 新手,仅仅参考) 1.react一开始我更理解为是一个各种代码片段,由于之前接触了一段时间meteor,感觉有点相似.在使用之前都要在app.js中将一总的父组件通过import导入,另外在route中的path中写入链接 例如:import createHistory f

    2017.12.07 React组件嵌套以及for循环渲染子组件

    1.嵌套组件之父组件的定义: export default class Examines extends Component{ componentWillMount() { console.log("aaaaaaaa"); var data2={ action:"queryTaskOfManager" }; Common.getData(JSON.stringify(data2),function (ret) { alert(ret); var data3={ na

    React Hook父组件获取子组件的数据/函数

    我们知道在react中,常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用.文档上说ref其实不是最佳的选择,但是想着偷懒不学redux,在网上找了很多教程,要不就是hook的讲的太少,要不就是父子组件傻傻分不清,于是只好再啃了一下文档,就学了一下其它hook的api. 在这里我们需要用到useImperativeHandle这个api,其函数形式为 useImperativeHandle(ref, createHandle, [deps]) 其实这个api也是ref

    Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属性绑定并赋值给子组件 5:子组件通过 props 接收父组件传递过的数据 6:查看 7:总结: 子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 原文地址:https://www.cnblo

    vue(ref父组件使用子组件中定义的方法)

    一.前言 二.主要内容 1.实现效果(其实可以直接在父组件中操作子组件的显示隐藏,但是这里通过在子组件定义自己的显示隐藏效果,让父组件调用,训练一下这种方式) 2.分析: (1)点击父组件的某一个li项,跳出这个商品详情(子组件项) (2)子组件中还是需要接收到父组件中的food,但是这个food不像上一篇那样是固定的,所以这里的这个food是根据我们点击的不同的项,传进去的 (3)为了实现上一步分析:我们需要在data中定义一个对象,点击的时候,将当前对象的food传进去,然后在传给子组件,这

    React 父组件触发子组件事件

    Parent组件 import React from "react"; import Child from "./component/Child"; class Parent extends React.Component { render() { return ( <div> 我是父组件 <Child childEvevnt={this.childEvevnt} /> <button onClick={this.triggerEvev

    VUe.js 父组件向子组件中传值及方法

    父组件向子组件中传值 1.  Vue实例可以看做是大的组件,那么在其内部定义的私有组件与这个实例之间就出现了父子组件的对应关系. 2. 父子组件在默认的情况下,子组件是无妨访问到父组件中的数据的,所以要想在子组件中使用父组件的数据的时候,就需要以属性绑定的形式,将父组件的数据传递到子组件中.     3. 通过属性绑定传递来的数据无法再子组件中直接使用,需要在props中重新定义以后才可以使用.例:props:['变量名'].props是一个数组.    4. 子组件中的data数据都是私有,子

    angular 中父组件调用子组件的方法

    angular中 父组件调用子组件的方法 -- 使用 @ViewChild 装饰器修饰子组件,获取方法,调用 除此之外 ViewChild 还可以获取 DOM ,操作 DOM , 详见: https://www.cnblogs.com/monkey-K/p/11567098.html 1. html 中使用 #var 方式标记 子组件 <div style="border: 1px solid red"> <p>子组件:</p>> <ap

    vue中父组件向子组件传值(方法)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>父组件把方法传递给子组件</title> <script src="./vue2.6.9.js"></script> </head> <body> <div id="app&