我想让我的子组件有一个参考,但我不希望用户在创建组件时必须指定参考。所以说我有这样的事情:
<Parent>
<Child />
<Child />
</Parent>
我希望父母能够访问子组件&#39;州。简单的方法是为每个组件添加一个ref,但我希望这是在constructor()
函数中完成的事情,以便从最终用户那里抽象出来,因为我喜欢这些组件被推广。
是否有一种干净的方式来使它成为父母可以访问子组件的状态,例如在创建Child时你有类似的东西:
class Child extends Component {
constructor(){
super();
this.state = {'abc': 123}
this.ref=Math.random();
}
}
所以在Parent类中我可以做类似的事情:
class Parent extends Component {
componentWillMount(){
console.log(this.refs);
}
}
所以我希望能够声明一组组件,如:
class App extends Component {
render(){
<Parent> <Child /> <Child /> </Parent>
}
}
因此,当父母通过子组件迭代时,我可以访问每个孩子及其状态。
答案 0 :(得分:2)
对于我正在制作的表单,我需要完全相同的东西,这就是我想出的将refs自动添加到子组件中
鉴于你有:
<Parent>
<Child />
<Child />
</Parent>
您可以在父组件渲染功能中使用它来为每个孩子添加一个参考。
render () {
let wrappedChildren = [];
React.Children.map(this.props.children, (child, i)=> {
if (!child) {
return;
}
let refName = 'child' + i
wrappedChildren.push(React.cloneElement(child, {
key: refName,
ref: refName,
}
));
}, this);
return (
<View>
{wrappedChildren}
</View>
)
}
这将为每个包含字符串加上当前地图索引的子项添加一个引用,然后以相同的顺序呈现它们,相当于这样做:
<Parent>
<Child ref="child0" />
<Child ref="child1" />
</Parent>
我知道字符串引用已被弃用,但我试图保持简单,你也可以通过改变使用refs作为回调:
ref: refName
为:
ref: (c) => { this[refName] = c }
然后在父组件中使用它作为this.child0例如。
希望它有所帮助。
答案 1 :(得分:2)
在这种方法中,“父级”组件是在渲染中使用子级的组件。您可以通过调用儿童的方法来操纵儿童的“状态”。
Parent.js
class Parent extends Component {
refs = [];
componentDidMount() {
this.refs[0].doSelect();
}
setRef = ref => {
this.refs.push(ref);
}
render() {
return (
<div>
<Child ref={this.setRef} />
<Child ref={this.setRef} />
</div>
)
}
}
Child.js
class Child extends Component {
state = { isSelected: false }
doSelect = () => {
this.setState({ isSelected: true })
}
render() {
return <div className="child" />
}
}
答案 2 :(得分:1)
State
只能由组件本身访问。 Parent
和child
组件只能访问自己的状态。您可以将值state
传递给子props
,但父级无法访问子组件状态。
将参考设置为子组件。
你为什么要这个?参考是为了
管理焦点,文本选择或媒体播放
触发势在必行的动画。
与第三方DOM库集成。
请访问此链接以了解Ref。的用途 https://facebook.github.io/react/docs/refs-and-the-dom.html
无论如何,组件可以有自己的引用,你可以将ref设置为子组件,
render: function() {
return (
<div>
<Child ref="child" />
<div><button onClick={this.handleClick}>ACCESS REF</button></div>
</div>
);
},
handleClick: function() {
alert(this.refs.child.refs.input.getDOMNode().value);
}
});
let Child = React.createClass({
render: function() {
return <input ref="input" />;
}
});
我会建议,你应该把回调作为道具传给孩子们。: