用withStyles导出子元件时，如何访问parent中的refs？
在使用withStyles导出子元件时，要访问父组件中的refs，可以通过将父组件的refs作为属性传递给子组件来实现。
首先，在父组件中定义一个ref，并将其传递给子组件作为属性。例如，假设父组件中有一个名为parentRef的ref，可以将其作为属性传递给子组件：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.parentRef = React.createRef();
}
render() {
return <ChildComponent parentRef={this.parentRef} />;
}
}然后，在子组件中可以通过props访问父组件传递的ref。可以使用React.forwardRef来将ref传递给子组件的根元素。例如：
const ChildComponent = React.forwardRef((props, ref) => {
// 使用ref访问父组件中的refs
// 例如：ref.current可以访问到父组件中的ref
// 可以在这里进行相应的操作
return <div ref={ref}>Child Component</div>;
});这样，通过ref.current就可以在子组件中访问到父组件中的ref。
需要注意的是，使用React.forwardRef时，需要将其作为export default的参数传递给withStyles。例如：
export default withStyles(styles)(ChildComponent);关于withStyles的具体用法和更多信息，可以参考腾讯云的相关产品和文档：
- 腾讯云产品：云服务器（CVM）
- 产品介绍链接地址：https://cloud.tencent.com/product/cvm
- 文档链接地址：https://cloud.tencent.com/document/product/213
相关·内容
2回答
我有一个类似下面的react组件：
<Parent>
<Child />
<button type="button" />
</Parent>
<Child />中有一个input[type="file"]表单控件。
当我点击<Parent />中的按钮时，我想用ajax上传<Child />格式的文件。
如何在<Child />中访问input[type="file"]
我试着使用refs
<Parent>
<
浏览 0提问于2016-03-05得票数 4
例如。
Child.js
//assume there is s as styles object and used in this component
class Child extends Component {
render() {
return (
<h1 ref={(ref)=>{this.ref = ref}}>Hello</h1>
);
}
}
export default withStyles(s)(Child);
Parent.js
class Parent extends Component {
onClick() {
浏览 7提问于2018-07-27得票数 5
回答已采纳
我正在尝试使用参考文献来访问嵌套的chilld组件中的方法。这是为了删除嵌套删除组件中的数据。我的代码如下(简化代码)：
父类：
class Parent extends Component {
constructor(props) {
this.childref = React.createRef()
props.refs(this)
}
render() {
const elements = return [
<div onclick={this.callsupprimer(0)} />,
<div onclick=
浏览 2提问于2019-06-26得票数 1
2回答
我的组件很大，所以我会给你简单的例子，也许有人会知道如何解决我的问题。
我有发票组件的子组件，如‘小计’，‘vat_小计’，‘总计’(这是例子)。我正在使用v从发票组件直接访问每个孩子。此外，从发票属性计算小计，然后从子属性小计计算vat_subtotal。“总计”是从vat_subtotal儿童中计算的。
示例：
invoice.$refs.subtotal.total = {some calculations}
vat_subtotal.total = @$parent.$refs.subtotal.total * 1.21
total.total = @$parent.$refs.vat
浏览 2提问于2016-09-17得票数 0
回答已采纳
1回答
我在将两个函数从Child传递给Parent时遇到了问题。子函数为=>
setValueLocally = () => {...}
show_User_Poll = () => {...}
在Parent中，我通过创建另外两个函数来访问这些函数。
savePollData() { this.refs.savePoll.setValueLocally() }
_show_User_Poll() { this.refs.showPoll.show_User_Poll() }
我在Parent中呈现这些函数。问题是如何为上述两个函数设置ref？
<Child ref
浏览 8提问于2020-03-06得票数 0
1回答
我有一个子组件，它内置在父组件中。我想从父级访问子方法。我想为此目的使用$refs。
模板：
<template>
<div>Parent!</div>
</template>
脚本：
<script>
Vue.component('child',{
template: `<div>I am child</div>`,
}
export default {
name: 'Parent'
}
</script>
浏览 0提问于2019-01-12得票数 1
我有一个JSX文件，其中包含：
1自定义组件“Parent”
2语义UI中的一些预定义ui组件：“Segment”
<Parent lst={["a","b","c"]}>
<Segment>
<Segment>
{this.props.content}
</Segment>
</Segment>
</Parent>
这个想法是，父组件将在this.props.lst上迭代，并使用React.cloneElement来克隆外部分段组件，并将
浏览 0提问于2017-05-06得票数 2
1回答
该模型在hashRouter in App.js下呈现。当其状态isOpen为真时，将显示该模态。
当我试图用redux显示一个Modal时，我就得到了这个错误。
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `TrapFocus`.
in ConnectFunction (at Modal.js:41)
in
浏览 1提问于2019-07-18得票数 6
回答已采纳
1回答
我是快照测试我的反应应用与Jest和酶。我正在尝试导出一个可测试版本的组件，该版本没有包装在更高的组件中。
然后，我希望导出包装好的组件，以便我的应用程序可以使用它，也可以导出一个可测试的版本，即我的组件的非包装版本。
这是我的组成部分：
NavBar.jsx
const NavBar = ({props}) => {(
<div>...</div>
)}
export { NavBar as TestableNavBar };
export default withStyles(styles)(NavBar);
NavBar.test.js
import
浏览 5提问于2017-11-20得票数 2
回答已采纳
2回答
我想测试一个简单的材料UI选择表单，它使用FormControl并导出withStyles。我的测试用例非常简单，例如，我想断言我的组件呈现一个子组件。我尝试以下断言：
expect(wrapper.find('InputLabel')).toEqual(true);
但是，这个断言失败只是因为InputLabel封装在WithStyles和WithStyles中(参见调试输出)：
<WithStyles(FormControl) id="my-control-id">
<WithStyles(WithFormControlCont
浏览 0提问于2019-02-11得票数 0
我正在尝试访问父组件中的子组件的方法。
首先，我想使用refs而不是this.props.children，但是只有在组件中使用它们时才能访问refs。
在使用这种方法时，似乎不可能：
<Parent>
<Child ref="testChild" />
</Parent>
在我的父组件中，我无法访问this.refs.testChild --因此，我必须使用this.props.children访问这个组件。
但是:当使用this.props.children访问它们时，我无法调用子方法。
示例：
// Child.jsx
{
c
浏览 4提问于2015-12-16得票数 0
回答已采纳
2回答
我正在尝试使用我写的这个组件：
import React from 'react';
import MenuItem from '@material-ui/core/MenuItem';
import ListItemText from '@material-ui/core/ListItemText';
const ITEMS = {
item1: { id: 1, name: '1', description: 'item1', protected: true },
item2: { id: 2,
浏览 6提问于2020-04-23得票数 0
回答已采纳
我有两个组成部分：
1:父母2:子女
我想把一些数据从孩子传给父母。实际上，在父组件中有一个方法如下：
mymethod= (message) => {
console.warn(message);
}
在子组件中，我使用以下内容：
<Parent ref= { (child) => {this.refs= child; }} />
this.refs.mymethod(message);
但当我运行这段代码时，我会发现：
未定义的对象不是一个对象(计算_this.ref.method)
浏览 1提问于2018-09-18得票数 0
回答已采纳
所以我有一个我试图用react方式编写的组件。其中每个主要容器被分离为React类组件。现在我知道如何通过一个组件使用withStyles :导出默认样式(WithStyles)(MyComponent)；
但是当你有两个以上的组件时，如何使用withStyles呢？代码如下：
class AtmanPage extends Component {
render() {
return (
<AtmanAppBar />
);
}
}
class AtmanAppBar extends Component {
render() {
浏览 1提问于2017-12-05得票数 1
2回答
什么是从'.‘导入{}的？做?
、、、、
我在看，我看到了这个进口
import {SheetsRegistry, JssProvider, withStyles} from '.'
这是干什么用的？它是如何导入from '.'的？
浏览 2提问于2019-12-12得票数 4
回答已采纳
需要在父组件级别上进行布线。无法在子级上使用查询参数进行路由。我需要做从子组件到父组件的事件发射器，并在父组件上设置路由。因为子组件是共享组件。 /// parent.html
<child-shared-comp></child-shared-comp>
.........................
child-shared-component.ts
func(dateSelected:date){
If(condition statisfy){
then should enable routing to a
浏览 19提问于2019-12-18得票数 0
回答已采纳
2回答
角JS元件绑定
、、
我在使从父组件循环到嵌套组件范围的ng重复项时遇到了问题。父组件是一个旋转木马，包含许多项组件。旋转木马由ng-重复填充。我希望能够访问项目控制器("it")中的" item“和旋转木马控制器("cr")的方法。我想我是用完全错误的方式来做这件事。如果有人能给我一个方向盘，我很感激。
carousel.component.html
<slick <!--slick attributes--> >
<div ng-repeat="item in cr.items">
&l
浏览 3提问于2017-01-09得票数 1
回答已采纳
我习惯于以类似于这样的方式编写我的React组件：
import React, { Component } from 'react';
import withStyles from 'react-jss';
const styles = theme => ({
// my styles
});
class MyComponent extends Component {
render() {
// my render function
}
};
export default withStyles(styles)(
浏览 0提问于2019-07-09得票数 0
回答已采纳
1回答
在我的组件中，我有这个作用域插槽：
<slot name="test">
<input ref="inputTest">
</slot>
在parent中，我这样做：
<div slot="test">
<input ref="inputTest">
</div>
但是，当我稍后尝试在组件中访问ref时：
console.log(this.$refs.inputTest);
我变得不确定。
我如何传入一个有引用的槽？
浏览 0提问于2018-03-26得票数 2
Material使用className进行存储。但是我怎样才能把样式传递给子反应组件？
下面是我的风格定义。
const styles = createStyles({
root: {
backgroundColor: 'transparent !important',
boxShadow: 'none',
paddingTop: '25px',
color: '#FFFFFF'
},
subComponentStyle: {
浏览 1提问于2019-05-21得票数 3
我有一个简单的React组件，它有两个输入，并使用输入值发送一个操作，将一个项目添加到一个目录中。
# components/addProduct.jsx
import React from 'react'
import { connect } from 'react-redux'
const AddProduct = ({
onClick
}) => {
let title, price
return (
<form
onSubmit= { (e) => {
e.preventDefaul
浏览 2提问于2017-02-01得票数 1
回答已采纳
我有一台Dashboard.js
这是我的代码
import React from "react";
import cx from "classnames";
import PropTypes from "prop-types";
import {Switch, Route, Redirect, withRouter} from "react-router-dom";
import {browserHistory} from 'react-router';
// creates a beautiful scroll
浏览 1提问于2018-09-21得票数 0
2回答
假设我定义了两个自定义的聚合物元素
<!-- Define inner elements -->
<polymer-element name="child-el" attributes="foo">
<script>
Polymer('child-el', {
/* -- Attributes ------------------------------------------------ */
foo: 'qux'
浏览 2提问于2014-04-23得票数 3
回答已采纳
1回答
我正面临着一个挑战，那就是为什么酶的坐骑在只有一个元素存在的情况下呈现出多种元素。
我有一个来自Material的snackbar，其数据测试id如下所示：
<MySnackbar
open={true}
variant="error"
message={"Test message"}
onClose={this.handleRequestClose}
data-test-id=&
浏览 1提问于2020-10-05得票数 2
回答已采纳
当我运行我的React.js前端时，我会收到这样的警告：
index.js:1446 Warning: Failed prop type: The prop `children` is marked as required in `InputAdornment`, but its value is `undefined`.
in InputAdornment (created by WithStyles(InputAdornment))
in WithStyles(InputAdornment) (at TopControls.js:101)
in div (creat
浏览 0提问于2019-02-21得票数 2
回答已采纳
这是我使用的ListItem组件：
<ListItem
activeClassName={classes.activeListItem}
className={classes.listItem}
component={NavLink}
to="/dashboard"
>
<ListItemIcon className={classes.listItemIcon}>
<DashboardIcon />
</ListItemIcon>
<ListItem
浏览 3提问于2019-06-22得票数 5
回答已采纳
我已经在StackOverflow上查看了许多摆脱findDOMNode警告的解决方案。还有https://material-ui.com/components/tooltips和https://material-ui.com/guides/composition/#wrapping-components。什么都不起作用。当我使用工具提示滚动项目时，会出现MaterialUI警告。 ERROR
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition w
浏览 25提问于2020-10-27得票数 1
我有一个名为MyButtons.js的文件，我想从它导出两个无状态函数组件，其中一个包含一个style变量。但我得到了以下错误。
路径/to/MyButtons.js SyntaxError: path/to/MyButtons.js:当前未启用对实验性语法'exportDefaultFrom‘的支持(64:8)：
64导出withStyles(样式)({ AllButtonsRow，UDButtons，})；
我做错了什么？
MyButtons.js
import React from 'react';
import { withStyles, } from
浏览 2提问于2019-02-18得票数 1
回答已采纳
3回答
我想使子组件具有ref，但我不希望用户在创建组件时必须指定ref。假设我有这样的东西：
<Parent>
<Child />
<Child />
</Parent>
我希望父组件能够访问子组件的状态。最简单的方法是为每个组件添加一个引用，但我希望这是在constructor()函数期间所做的事情，以便从最终用户那里抽象出来，因为我希望这些组件是通用的。
有没有一种干净的方法让父组件可以访问子组件的状态，比如当子组件被创建时，你会有类似这样的东西：
class Child extends Component {
constr
浏览 2提问于2017-03-05得票数 3
回答已采纳
我使用Jest和酶，在执行.debug()时，我有一个反应组件，在其结构下面。
console.log src\shared\navigation\Navigations.test.js:20
<NavLink to="/" exact={true} activeStyle={{...}} activeClassName="active">
Weather
</NavLink>
我正在使用下面的代码来尝试测试NavLink是否有一个带有值/的属性to。
找不到该属性(我相信，当组件使用浅层挂载时，对象将使用下
浏览 2提问于2017-10-03得票数 0
1回答
我有一个customer组件，里面有一个带有vuetable 2的子组件，当我在父组件上更新或创建新的customer时，我需要做的就是刷新表。 我希望在parent上使用$emit： this.$emit('CustomerInform'); 在vuetable2组件中： this.$on('CustomerInform', () => {
this.$refs.CustomersTable.refresh();
}); 当表在我使用"$refs.CustomersTable.refresh()“进行POST/PUT的相同组件中时，一切都
浏览 34提问于2019-04-15得票数 1
回答已采纳
我们有一种类似的形式：
<v-form v-model="valid" ref="form">
<some-component1>
<some-component2>
<some-component3>
<v-text-field @focus="fieldFocus" />
</some-component>
</some-component>
</some-component>
<
浏览 0提问于2019-05-02得票数 1
回答已采纳
我试图从子组件中定义的父组件访问ref。我有一个文件，其中调用父组件，在组件内部调用2个子组件，如下所示：
<my-component>
<component-header></component-header>
<component-content></component-content>
</my-component>
在my-component内部，我得到了一个<slot></slot>，而没有其他html，但是在这里，我需要调用一个在component-header中列出的r
浏览 11提问于2022-09-17得票数 0
回答已采纳
我有一个使用StrictMode的基于钩子(无类)的简单ReactJS应用程序。
我使用的是React版本16.13.1和Material-UI版本4.9.10。
在应用程序栏中，我正在使用抽屉。
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<IconButton
edge="start"
浏览 26提问于2020-04-15得票数 132
我正在使用Storybook 5.2.6 for React 16.9.0和Typescript 3.5.3，并使用Material UI主题组件。在添加和配置了@ Storybook /addon-docs之后，当组件从@ PropsTable -ui中被包装时，Storybook文档页面在withStyles中显示：“Cannot read property 'classes‘of undefined”。
组件：
import React, {FunctionComponent} from 'react';
import { Typography } from &#
浏览 11提问于2019-11-13得票数 3
我是新的反应，我正在努力建立一个网站。我想从父组件触发子组件函数。也就是说，我有一个对话框组件和一个Navbar组件。Navbar(子)中的Onclick事件将道具发送给Display(父组件)，此父组件必须触发Dialogbox (子)组件中的函数来启动对话框，此对话框必须根据用户输入将me true或false返回给父组件。我已经成功地做到了。真正的问题是我
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which i
浏览 0提问于2020-05-06得票数 0
回答已采纳
好的，假设我有一个组件，如下所示：
它由两个不同的组件组成：
1)整个矩形(让我们称之为card)
2)每个边(正方形)都是另一个组件(让我们称之为cardSide)
我在card上添加了一个按钮，当单击它时，它会收集每个cardSide组件的所有信息(文本、注释、图像等)。
我的问题是，我如何才能做到这一点？我读过关于passing refs from parent to children和sending props from parent to children的文章，但是我还没有找到任何相反的getting the props/states from children comp
浏览 2提问于2019-04-10得票数 1
我想将OutboundLink组件从插件包装在一个实质性的UI链接组件中。
我在控制台中得到以下错误消息：
index.js:2177 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
Check the render method of `ForwardRef`.
in OutboundLink (created by ForwardRef)
in ForwardRe
浏览 2提问于2019-06-12得票数 1
回答已采纳
如果我有这样的东西
<Parent>
<Child1 />
<Child2 />
<Child3 />
</Parent>
我想从Child2访问有refs="child2refs"的地方，我怎么做呢？
浏览 21提问于2016-06-05得票数 87
回答已采纳
2回答
只是希望得到一些帮助，在这个Blazor的一些功能。我正在构建一个真正的SPA应用程序，没有导航，这意味着我将需要一个公平的链接。
我将遵循一些基本原理，比如说Winforms或UWP，如果您可以访问控件的话。并将Blazor组件当作控件对待。尽我所能用C#做更多的工作。
到目前为止我知道：
对于子组件，我可以创建一个事件回调，并在父组件中注册它。可以用@ref标记存储对子组件的引用。然后在OnRender完成后访问子组件的函数。i可以使用builder.动态构建组件。
但是我如何传递父母对孩子的引用呢？例如设置子参数并传递"this“。
其思想是，Index的每个子组件都有对Inde
浏览 8提问于2020-02-20得票数 0
回答已采纳
1回答
我在我的react-router应用程序的每个页面中都有这个函数。
submitForm(e) {
const redirect = this.props.location.query.redirect;
const age = this.refs.age.value;
const gender = this.refs.gender.value;
const ethnicity = this.refs.ethnicity.value;
if (!age || !gender || !ethnicity) {
this.props.d
浏览 8提问于2017-08-09得票数 0
2回答
我尝试导出多个组件，但没有成功。
导出代码如下：
export default props => {
const validate = (values, props) => {
let errors = {};
if (!values.userName) {
errors.userName = "required";
}
if (!values.userEmail) {
errors.userEmail = "required";
}
if (!values.userPho
浏览 0提问于2019-03-12得票数 0
1回答
反应元件的存取子
、、
想象一下有反应成分
function List() {
return (<ul>
<li>1</li>
<li>2</li>
</ul>
);
}
我想要创建高阶组件，例如修改所有li节点的样式.
function makeRed(component) {
return function(props) {
const element = React.createElement(component, props)
浏览 0提问于2018-08-09得票数 5
回答已采纳
我是Jest的新手，我只想从我拥有的组件中获得状态。如果组件不使用material，并且没有用“with state”导出，我可以获得状态。但是当我用'withStyles‘导出组件时，它突然失效了。
构成部分：
import React from 'react';
import { withStyles } from '@material-ui/core/styles';
//CSS styles
const styles = {
root: {
marginTop:25,
},
};
class Test exte
浏览 1提问于2018-12-06得票数 0
回答已采纳
我已经开始学习反应。
当使用时，我不确定如何在(父-子)组件之间传递值。
当我不使用connect或compose直接导出类时，效果很好。
误差
Type '{ dataFromParent: string; parentCallback: (data: any) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<unknown, any, any>> & Readonly<un
浏览 1提问于2020-03-26得票数 0
回答已采纳
4回答
我尝试将当前组件的引用传递给子组件，如下所示：
<template>
<div class="screen" ref="screen">
<child-component :screenRef="screenRef">
</child-component>
</div>
</template>
<script>
const Parent = {
name: 'parent'
浏览 0提问于2018-08-03得票数 20
我有一个<Child />组件列表，然后我使用一个数组this.state.infos来生成这些子组件。如何使用this.refs获取特定的子组件？
注:例如，this.state.infos = ['tom', 'mike', 'julie'];。
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
infos: {},
};
}
浏览 0提问于2018-01-22得票数 8
1回答
我有一个页面(parent.html)，它有许多链接，单击这些链接打开窗口如下：
winRef = window.open(url, '_blank', 'width=800,height=600,resizable,scrollbars');
若要在关闭子窗口时发出警告，请在parent.html中使用以下内容。
var timer = setInterval(function() {
if(win_ref.closed) {
clearInterval(timer);
alert(
浏览 2提问于2014-08-07得票数 2
回答已采纳
1回答
我正在寻找一个模式，使用反应材料设计与打字稿，但我有一些问题。
导出默认值似乎是一种反模式，而我的tsconfig中的选项将不允许我这样做。我想知道他们是否有更好的方法来做到这一点，而不通过tsconfig禁用它。
对于使用类而不是函数的状态组件，我将如何将with样式应用到类中。
谁能帮我把anti样式应用到我典型的有状态组件模式，而不引入反模式。
典型状态组件模式：
import * as React from "react";
export namespace Header {
export interface Props {
}
}
ex
浏览 2提问于2018-12-09得票数 0
2回答
我试图利用与斯塔胡安的Redux登录模板显示。因此，我想合并这两个函数中的export default，换句话说，合并了两个函数，用于导出默认类：
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { withStyles, createStyleSheet } from 'material-ui/styles';
// Redux
function select (state) {
return {
dat
浏览 3提问于2017-08-14得票数 6
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
