Как получить доступ к дочерним компонентам ссылки в React Native Web? - PullRequest
Новая
       26

Как получить доступ к дочерним компонентам ссылки в React Native Web?

1 голос
/ 17 апреля 2020

У меня есть некоторые ссылки в веб-приложении React Native - эти ссылки работают на 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();

, который передается в дочерний компонент в качестве реквизита и используется как таковой: 

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

У него есть несколько дочерних элементов (которые также имеют вложенные дочерние элементы).

Однако в сети вообще нет ._children.

Как получить доступ к детям?

Можно напрямую манипулировать DOM, если Platform.OS === 'web' : 

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