无法在 React Native 中使用 innerHTML答案

【问题标题】：Cannot use innerHTML in React Native无法在 React Native 中使用 innerHTML
【发布时间】：2021-03-09 12:21:24
【问题描述】：

我想创建一个元素（li）并在其中写入一个带有innerHTML的字符串，然后最后将其附加到另一个元素（ul）。我看到你需要使用 dangerouslysetinnerhtml 函数，但我不知道如何使用它。

错误：

TypeError: 无法添加属性 innerHTML，对象不可扩展

我的密码：

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import firebase from 'firebase'
import { ActivityIndicatorComponent, StyleSheet, Text, View, TextInput, Button } from 'react-native';

export default class Chatroom extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      UEmail: '',
      DefaultText: 'No contact has been selected.',
      messagebox: '',
    }
}

  visiblechat = () => {
    this.setState({DefaultText: "Contact has been selected."})
  }
 

  startchat = () => {
    var messageul = document.getElementById("messageboxul");
    var messagebox = this.state.messagebox;
    var txt = React.createElement("li");
    txt.innerHTML = messagebox
    messageul.appendChild(txt)
  }

  chatfunc = () => {
   var email = this.state.UEmail
   var emailurl = window.location.href;
   var useremailid = emailurl.substring(emailurl.indexOf("?") + 1);
   firebase.auth().fetchSignInMethodsForEmail(email)
   .then(providers => {
  if (providers.length === 0) {
    alert("This email ID doesn't exist. Enter a different Email address")
  }else if(email === useremailid){
   alert("You can't message yourself. Enter a different Email address")
  }else {
    this.visiblechat()
  }
});
  }

  sendMessage = () => {
    var emailurl = window.location.href;
    var useremailid = emailurl.substring(emailurl.indexOf("?") + 1); //User display name
    var message;  //User message
    firebase.database().ref("messages").push().set({ //Save user name and message in reference "messages" in firebase database
        "sender": useremailid,
        "message": message
    });
    return false;
}

  render() {

    var emailurl = window.location.href;
    var useremailid = emailurl.substring(emailurl.indexOf("?") + 1);

    var chatcontainer = {
      position: "relative",
      top: 130,
      left: 8, 
    }
  return (<>
  <Text>Your Email: {useremailid}</Text>
  <Text style={{fontWeight: "bold",fontSize: 20, position: "relative", top: 20}}>ENTER THE EMAIL OF WHO YOU WANT TO TALK TO:</Text>
  <View style={{position: "absolute", top: 115, width: "100%"}}>
  <TextInput
          style={{height: 45,width: "100%",borderColor: "gray",borderWidth: 2}}
          placeholder=" Enter Email..."
          onChangeText={UEmail => this.setState({UEmail})}
          underlineColorAndroid="transparent"
        />
        <Button
          onPress={this.chatfunc}
          title="Login"
          color="#00B0FF"
        />
        </View>

        <View style={chatcontainer}>
        <Text style={{fontWeight:"bold", position:"relative",top:1}}>{this.state.DefaultText}</Text>
        <View style={{position: "relative", top:12}}>
        <ul id="messageboxul">
         <li>hahah</li>
        </ul>
        <div style={{position: "sticky", top: 240,height: 60, width: "100%"}}>
        <TextInput style={{position: "relative", width: "100%", height: "100%"}} placeholder="Enter your message"
        onChangeText={messagebox => this.setState({messagebox})}
        />
        <button style={{position: "relative", width: 243}} onClick={this.startchat}>Send Message</button>
        </div>
        </View>
        </View>
</>);
  }
}

const styles = StyleSheet.create({

});

不要担心sendmessage函数和useremailid变量，这并不重要。非常感谢您的帮助。

【问题讨论】：

标签： javascript reactjs firebase web

【解决方案1】：

你不能在 React Native 中使用 HTML，除非它在 webview 中

【讨论】：

【解决方案2】：

哦，男孩，从哪里开始。这里有很多话要说。最重要的是，您不能将 HTML 与 ReactNative 一起使用。 HTML 是一种专门的BROWSER 标记语言。意思是，你根本不能在手机上使用 HTML / CSS。所以div、li、ul，在 React Native 中不存在。这些是 WEB 的组成部分

因为这些东西不存在，React Native 试图通过提供一些开箱即用的构建块来帮助你。您正在使用其中一些构建块（Text、View 等）。您正在寻找类似于li 和ul 的东西。您正在寻找的可能是来自 ReactNative 的 FlatList 组件。你可以阅读更多关于它的信息here。希望我有所帮助。祝你好运

【讨论】：