javascript - 如何在 React Native Web 中访问引用的子组件？

Question

我在 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 传递给子组件并按以下方式使用:

<View ref={this.props.highlight}>

它有几个 child (他们也有嵌套的 child )。

但是，在网络上，没有 ._children一点也不。

如何访问 child ？

如果 Platform.OS === 'web' 可以直接进行 DOM 操作:

let dom = ReactDOM.findDOMNode(this.highlight.current);
... DOM manipulations

但是，如果不是绝对必要的话，这会让人感觉困惑和重复代码。我宁愿通过 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} />
    );
  }
}

Answer 1

[编辑]:由于这个“某人的工作”是针对类组件的，所以这是我使用带有功能组件的动态引用的答案之一:Dynamic refs with functional component .它使用 useRef() hooks 来存储你的动态引用，因此它们可以在任何你想要的地方使用特定的 id 访问。

在尝试了一会儿之后，我找不到一种干净的方式来做你想做的事情。但是，正如您在 ReactDOM 中所说的那样，有解决方案。我想到的另一件事是将您的引用设置在您的 child 中，然后将其传递给 parent 。

这是有人在 .map 中使用 key 属性进行“动态”引用，也许它对您有用:Someone's work

现在，使用直接操作不是一个好习惯，所以使用它而不是 ReactDOM.findDOMNode ......我真的不知道哪个更糟，但我猜两者都很困惑。