首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

接下来JS,React使子组件告诉父组件呈现什么

在JS和React中,子组件可以通过回调函数的方式告诉父组件应该呈现什么内容。

在React中,父组件可以通过将一个函数作为props传递给子组件,子组件可以在需要的时候调用该函数并传递参数,从而将需要呈现的内容传递给父组件。

以下是一个示例代码:

代码语言:txt
复制
// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      content: ""
    };
  }

  handleChildCallback = (content) => {
    this.setState({ content });
  }

  render() {
    return (
      <div>
        <ChildComponent onCallback={this.handleChildCallback} />
        <div>{this.state.content}</div>
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  handleClick = () => {
    const content = "这是子组件传递给父组件的内容";
    this.props.onCallback(content);
  }

  render() {
    return (
      <button onClick={this.handleClick}>告诉父组件呈现内容</button>
    );
  }
}

在上述代码中,父组件ParentComponent通过handleChildCallback函数将子组件ChildComponent传递给子组件。子组件在点击按钮时调用handleClick函数,并将需要呈现的内容传递给父组件。

这样,当子组件点击按钮时,父组件会更新content的状态,并将子组件传递的内容呈现在页面上。

这种方式可以实现子组件告诉父组件应该呈现什么内容的功能。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 组件传对象给组件_react组件改变组件的状态

    组件传值给组件 首先 组件组件名“Child”)内定义一个方法 例如 sendData = () => { let data = ‘1234’; this.props.getData(data...); //这个this,props.xxx 后面的xxx是是在组件那使用的名字; }, 然后可以在render函数后使用这个方法或者另外定义一个事件去触发该方法进行传值, 之后可在组件(Parent...)内使用这个方法获取拿到的值: Parent组件内:首先定义一个方法getData或者其他什么都可以随便取 ,这里的this.getData的这个方法是你随便取的那个,例如getData=this.xxx...都可以,但是你这里是this.xxx,组件内定义的方法就必须名字叫xxx, 然后就是 xxx = (data) => { console.log(data); //此时就会打印 组件传给组件

    2.8K30

    Vue.js 组件组件传值和组件组件传值

    组件组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据 // 创建 Vue 实例,得到 ViewModel var vm = new...-- 组件,可以在引用组件的时候, 通过 属性绑定(v-bind:) 的形式, 把 需要传递给 组件的数据,以属性绑定的形式,传递到组件内部,供组件使用 --> <com1 v-bind...和 methods 中的方法 com1: { data() { // 注意: 组件中的 data 数据,并不是通过 组件传递过来的,而是组件自身私有的,比如:...原理:组件将方法的引用,传递到组件内部,组件在内部调用组件传递过来的方法,同时把要发送给组件的数据,在调用方法的时候当作参数传递进去; 组件将方法的引用传递给组件,其中,getMsg是组件中...-- 组件组件 传递 方法,使用的是 事件绑定机制; v-on, 当我们自定义了 一个 事件属性之后,那么,组件就能够,通过某些方式,来调用 传递进去的 这个 方法了 --> <com2

    5.5K10

    react组件互相通信传值

    组件传值源码地址:JACK-ZHANG-coming/react-demo-project: 用于存放一些react相关的基础例子; (github.com) 本系列你将能学到: 组件传值与函数给组件...,在组件可使用组件的值与函数; (该章链接:https://juejin.cn/post/6991470029736771615) 组件传值与函数给组件,在组件里面可使用组件里面的值与函数;.../post/6992576182357082142) 1 组件传值与函数给组件,在组件可使用组件的值与函数# 主要是通过react三大属性之一props来进行。...详细 2 组件传值与函数给组件,在组件可使用组件的值与函数# 通过react的hooks新特性,useRef、useImperativeHandle、forwardRef 来实现。...详细 3 组件传值与函数给组件,在组件可使用另一个组件的值与函数# 其跟的实现方法差不多,通过react的hooks新特性,将useRef建立的实例再通过props传给另一个组件就可以啦

    1.2K20

    react组件互相通信传值

    组件传值源码地址:JACK-ZHANG-coming/react-demo-project: 用于存放一些react相关的基础例子; (github.com) 本系列你将能学到: 组件传值与函数给组件...,在组件可使用组件的值与函数; (该章链接:https://juejin.cn/post/6991470029736771615) 组件传值与函数给组件,在组件里面可使用组件里面的值与函数;.../post/6992576182357082142) 1 组件传值与函数给组件,在组件可使用组件的值与函数 主要是通过react三大属性之一props来进行。...详细 2 组件传值与函数给组件,在组件可使用组件的值与函数 通过react的hooks新特性,useRef、useImperativeHandle、forwardRef 来实现。...详细 3 组件传值与函数给组件,在组件可使用另一个组件的值与函数 其跟的实现方法差不多,通过react的hooks新特性,将useRef建立的实例再通过props传给另一个组件就可以啦~

    63130

    react组件相互通信传值系列之——组件传值与函数给

    本系列你将能学到: 组件传值与函数给组件,在组件可使用组件的值与函数; 组件传值与函数给组件,在组件里面可使用组件里面的值与函数; 组件传值与函数给组件,在组件里面可使用另一个组件的值与函数...; 组件传值与函数给组件,在组件可使用组件的值与函数 主要是通过react三大属性之一props来进行,下面开始上代码: 组件关键代码 import React, { useState } from...}> ); } ​ export default App; ​ 组件关键代码 import React, { useState } from 'react'...1 组件使用组件的值:{props.parentValue} { props.setParentValue('我触发组件函数了,组件触发的哟~' + props.parentValue); }}>组件使用组件的函数</button

    89310

    React-hooks 组件通过ref获取组件数据和方法

    我们知道,对于组件或者节点,如果是class类,存在实例,可以通过 React.createRef() 挂载到节点或者组件上,然后通过 this 获取到该节点或组件。...render(){ return } } 但是在组件是函数组件的时候,因为函数组件没有实例,所以在正常情况下, ref 是不能挂载函数组件上的...useImperativeHandle useImperativeHandle:可以配合 forwardRef 自定义暴露给组件的实例值。...forwardRef 会创建一个 React 组件,这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。...isDisable} val={formData.isRaiseMoney} ref={collectRef} handleChange={handleChangeAmount} /> // 然后就可以在组件中的一些方法中获取组件暴露出来的方法或值

    2.1K30

    vue.js: 自定义事件之—— 组件修改组件的值

    如何利用自定义的事件,在组件中修改组件里边的值?...关键点记住:三个事件名字 步骤如下: 这里,相对本案例,组件定义为Second-module,对应的组件是Three-module 第一步:你要想改动组件的值,你组件得先有值让你改吧!...444.png 第三步:组件定义公用值,就是为了让组件用的,你得把值给了组件吧!...),好交代让它出征去改动组件的值,并让他带上一个参数(就是要把组件的值改成啥,荆轲手里拿的那个包着小匕首的地图,),让他去带话 ,既出使秦国(组件内部)将燕王(组件)的旨意传递给元素(秦大王)...他是一个使者,是链接组件改动组件值的桥梁。 第八步:自定义事件来到组件中(秦王),找到和他同名的事件(也就是荆轲刺秦时,接待荆轲的秦国大臣本人了!

    6K40

    React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件组件组件传值

    React + webpack 开发单页面应用简明中文文档教程(七)jsx 组件中调用组件组件组件传值 在上一章中,我们成功调取数据,并渲染了一个列表。应该还是有成就感的吧。...创建 @/coms/header.jsx 组件 新建这个文件,并输入以下代码: import React, { Component } from 'react' export default class...我们去修改我们的 page/site/index.jsx 文件 组件调用并传值给组件 import React, { Component } from 'react' import { Link }...from 'react-router-dom' import Api from '@/tool/api.js' // 这样,调用我们的自定义的组件 import Header from '@/coms...如上,我们顺利的把值传给了组件,并且组件顺利的给显示出来了。

    1.1K10

    React + webpack 开发单页面应用简明中文文档教程(九)组件组件传值

    + webpack 开发单页面应用简明中文文档教程(九)组件组件传值 React 入门系列教程导航 React + webpack 开发单页面应用简明中文文档教程(一)一些基础概念 React...前面我们讲过组件组件传值,非常的简单。但是,组件如何给组件传值呢?我们需要明白一个概念,就是 react 组件之间的关系,如下图所示: ? 由上及下特别简单,但是由下到上,就会比较困难。...组件写好 state 和处理该 state 的函数,并将函数通过 props 属性值传送给组件组件调用组件传过来的函数,引起组件 state 变化,就把值传给组件了。 好,概念结束。...然后,我们需要到路由 @/router/App.js 文件中去引入这个组件。...小结 组件组件传一个设置 state 的函数 组件在合适的时机,将值给这个组件传来的函数执行。 通过这个简单的示例,应该对 react 组件组件传值有了一定的了解了。

    51870
    领券