如何在 React Native Web 中访问引用的 children 个组件?
How do I access children components of a reference in React Native Web?
我在 React Native Web 应用程序中有一些参考资料 - 这些参考资料适用于 React Native,但不适用于 RNW。
比如我有这个代码:
this.highlight.current._children[i].setNativeProps({ style: { backgroundColor: "black" } });
this.highlight.current._children[i]._children[0]._children[0].setNativeProps({ style: { color: "white" } })
this.highlight.current._children[i]._children[1]._children[0].setNativeProps({ style: { color: "white" } })
这是基于:
this.highlight = React.createRef();
它作为 prop 传递到 child 组件中并这样使用:
<View ref={this.props.highlight}>
它有几个children(他们也嵌套了children)。
然而,在网络上,根本没有._children
。
如何访问 children?
如果Platform.OS === 'web'
:
,则可以直接进行DOM操作
let dom = ReactDOM.findDOMNode(this.highlight.current);
... DOM manipulations
但这感觉很乱,而且 code-duplicating 如果不是绝对必要的话。我更愿意通过 React Native API.
直接将我的修改应用于参考
编辑:更多代码 - 这是我的结构和一些与问题相关的函数。我删掉了不相关的部分,试图让我发布的代码更小
class DetailBody extends Component {
constructor() {
super();
}
render() {
return (
<ScrollView >
<Text>{this.props.article.intro}</Text>
<View ref={this.props.highlight}>
{this.props.article.json.results.map((content, index) => (
<View key={index} style={{}}>
{content.pinyin ? (
<Fragment>
<View>
<Text>
{content.pinyin}
</Text>
</View>
<View>
<Text>
{content.simplified}
</Text>
</View>
</Fragment>
) : (
<Fragment>
<View>
<Text>
</Text>
</View>
<View>
<Text>
{content.characters}
</Text>
</View>
</Fragment>
)
}
</View>
))}
</View>
</ScrollView>
)
}
}
class Detail extends Component {
constructor() {
super();
this.state = {
currentVal: 0,
};
this.traverseCharacters = this.traverseCharacters.bind(this)
this.highlight = React.createRef();
}
async traverseCharacters(i) {
this.highlight.current._children[i].setNativeProps({ style: { backgroundColor: "black" } });
this.highlight.current._children[i]._children[0]._children[0].setNativeProps({ style: { color: "white" } })
this.highlight.current._children[i]._children[1]._children[0].setNativeProps({ style: { color: "white" } })
if (i > 0) {
this.clearCharacters(i)
}
}
render() {
return (
<DetailBody {...this.props} article={this.state.article} highlight={this.highlight} />
);
}
}
[编辑]:由于这个“某人的作品”是针对 class 组件的,因此这是我使用带有功能组件的动态引用的答案之一:。它使用 useRef()
挂钩来存储您的动态引用,因此它们可以在任何您想要的地方访问,并具有特定的 ID。
现在尝试了一会儿之后,我找不到一种干净的方法来做你想做的事。但是,正如您在 ReactDOM 中所说的那样,有解决方案。我想到的另一件事是在 child 中设置引用,然后将其传递给 parent.
有人使用 key 属性在 .map 中进行 'dynamic' 引用,也许对您有用:Someone's work
现在,使用直接操作不是一个好的做法,所以使用这个不是 ReactDOM.findDOMNode...我真的不知道哪个更糟糕,但我想两者都很混乱。
setNativeProps
在子元素上不可用。在对它们调用 setNativeProps 之前,您需要自己提供对预期子元素的引用
对于 ref 解决方案,您可以像下面那样使用 ref 回调 并向您希望的每个元素添加一个 ref动态更新
class DetailBody extends Component {
setRef = (i, j, ref) => {
if(this.highlight[i]) {
this.highlight[i][j] = ref;
} else {
this.highlight[i] = {[j]: ref};
}
}
render() {
return (
<ScrollView >
<Text>{this.props.article.intro}</Text>
<View>
{this.props.article.json.results.map((content, index) => (
<View key={index} style={{}} ref= {(ref) => this.setRef(index, 'root', ref)}>
{content.pinyin ? (
<Fragment>
<View ref= {(ref) => this.setRef(index, 0, ref)}>
<Text>
{content.pinyin}
</Text>
</View>
<View ref= {(ref) => this.setRef(index, 1, ref)}>
<Text>
{content.simplified}
</Text>
</View>
</Fragment>
) : (
<Fragment>
<View ref= {(ref) => this.setRef(index, 0, ref)}>
<Text>
</Text>
</View>
<View ref= {(ref) => this.setRef(index, 1, ref)}>
<Text>
{content.characters}
</Text>
</View>
</Fragment>
)
}
</View>
))}
</View>
</ScrollView>
)
}
}
class Detail extends Component {
constructor() {
super();
this.state = {
currentVal: 0,
};
this.traverseCharacters = this.traverseCharacters.bind(this)
this.highlight = {};
}
async traverseCharacters(i) {
this.highlight[i].root.setNativeProps({ style: { backgroundColor: "black" } });
this.highlight[i][0].setNativeProps({ style: { color: "white" } })
this.highlight[i][1].setNativeProps({ style: { color: "white" } })
}
render() {
return (
<DetailBody {...this.props} article={this.state.article} highlight={this.highlight} />
);
}
}
我在 React Native Web 应用程序中有一些参考资料 - 这些参考资料适用于 React Native,但不适用于 RNW。
比如我有这个代码:
this.highlight.current._children[i].setNativeProps({ style: { backgroundColor: "black" } });
this.highlight.current._children[i]._children[0]._children[0].setNativeProps({ style: { color: "white" } })
this.highlight.current._children[i]._children[1]._children[0].setNativeProps({ style: { color: "white" } })
这是基于:
this.highlight = React.createRef();
它作为 prop 传递到 child 组件中并这样使用:
<View ref={this.props.highlight}>
它有几个children(他们也嵌套了children)。
然而,在网络上,根本没有._children
。
如何访问 children?
如果Platform.OS === 'web'
:
let dom = ReactDOM.findDOMNode(this.highlight.current);
... DOM manipulations
但这感觉很乱,而且 code-duplicating 如果不是绝对必要的话。我更愿意通过 React Native API.
直接将我的修改应用于参考编辑:更多代码 - 这是我的结构和一些与问题相关的函数。我删掉了不相关的部分,试图让我发布的代码更小
class DetailBody extends Component {
constructor() {
super();
}
render() {
return (
<ScrollView >
<Text>{this.props.article.intro}</Text>
<View ref={this.props.highlight}>
{this.props.article.json.results.map((content, index) => (
<View key={index} style={{}}>
{content.pinyin ? (
<Fragment>
<View>
<Text>
{content.pinyin}
</Text>
</View>
<View>
<Text>
{content.simplified}
</Text>
</View>
</Fragment>
) : (
<Fragment>
<View>
<Text>
</Text>
</View>
<View>
<Text>
{content.characters}
</Text>
</View>
</Fragment>
)
}
</View>
))}
</View>
</ScrollView>
)
}
}
class Detail extends Component {
constructor() {
super();
this.state = {
currentVal: 0,
};
this.traverseCharacters = this.traverseCharacters.bind(this)
this.highlight = React.createRef();
}
async traverseCharacters(i) {
this.highlight.current._children[i].setNativeProps({ style: { backgroundColor: "black" } });
this.highlight.current._children[i]._children[0]._children[0].setNativeProps({ style: { color: "white" } })
this.highlight.current._children[i]._children[1]._children[0].setNativeProps({ style: { color: "white" } })
if (i > 0) {
this.clearCharacters(i)
}
}
render() {
return (
<DetailBody {...this.props} article={this.state.article} highlight={this.highlight} />
);
}
}
[编辑]:由于这个“某人的作品”是针对 class 组件的,因此这是我使用带有功能组件的动态引用的答案之一:useRef()
挂钩来存储您的动态引用,因此它们可以在任何您想要的地方访问,并具有特定的 ID。
现在尝试了一会儿之后,我找不到一种干净的方法来做你想做的事。但是,正如您在 ReactDOM 中所说的那样,有解决方案。我想到的另一件事是在 child 中设置引用,然后将其传递给 parent.
有人使用 key 属性在 .map 中进行 'dynamic' 引用,也许对您有用:Someone's work
现在,使用直接操作不是一个好的做法,所以使用这个不是 ReactDOM.findDOMNode...我真的不知道哪个更糟糕,但我想两者都很混乱。
setNativeProps
在子元素上不可用。在对它们调用 setNativeProps 之前,您需要自己提供对预期子元素的引用
对于 ref 解决方案,您可以像下面那样使用 ref 回调 并向您希望的每个元素添加一个 ref动态更新
class DetailBody extends Component {
setRef = (i, j, ref) => {
if(this.highlight[i]) {
this.highlight[i][j] = ref;
} else {
this.highlight[i] = {[j]: ref};
}
}
render() {
return (
<ScrollView >
<Text>{this.props.article.intro}</Text>
<View>
{this.props.article.json.results.map((content, index) => (
<View key={index} style={{}} ref= {(ref) => this.setRef(index, 'root', ref)}>
{content.pinyin ? (
<Fragment>
<View ref= {(ref) => this.setRef(index, 0, ref)}>
<Text>
{content.pinyin}
</Text>
</View>
<View ref= {(ref) => this.setRef(index, 1, ref)}>
<Text>
{content.simplified}
</Text>
</View>
</Fragment>
) : (
<Fragment>
<View ref= {(ref) => this.setRef(index, 0, ref)}>
<Text>
</Text>
</View>
<View ref= {(ref) => this.setRef(index, 1, ref)}>
<Text>
{content.characters}
</Text>
</View>
</Fragment>
)
}
</View>
))}
</View>
</ScrollView>
)
}
}
class Detail extends Component {
constructor() {
super();
this.state = {
currentVal: 0,
};
this.traverseCharacters = this.traverseCharacters.bind(this)
this.highlight = {};
}
async traverseCharacters(i) {
this.highlight[i].root.setNativeProps({ style: { backgroundColor: "black" } });
this.highlight[i][0].setNativeProps({ style: { color: "white" } })
this.highlight[i][1].setNativeProps({ style: { color: "white" } })
}
render() {
return (
<DetailBody {...this.props} article={this.state.article} highlight={this.highlight} />
);
}
}