How do I access children components of a reference in React Native Web?

[Edit]: Since this 'someone's work' is for class component, here is one of my answer using dynamic refs with a functional component : Dynamic refs with functional component. It uses a useRef() hooks to store your dynamic refs, and so they're accessible wherever you want, with a specific id.

---

After trying things for a moment now, I cannot find a clean way of doing what you want to do. However, there is solutions for this, as you said with the ReactDOM. Another thing that came in my mind would be to set your refs in your child and then pass it to the parent.

Here is someone doing 'dynamic' ref in a .map using the key attribute, maybe it can be of use to you : Someone's work

Now, using direct manipulation isn't a good practice, so using this isntead of ReactDOM.findDOMNode... I don't really know which is one is worse but both are messy i guess.

setNativeProps isn't available on the children element. You either need to provide a refs to the intended child elements yourself before calling setNativeProps on them

For a ref solution you could make use of ref callbacks like below and add a ref to each and every element that you wish to update dynamically

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} />
    );
  }
}