如何将React-Native中的字符串更改为组件？

我有一个var str = '<Text> something </Text>'，我可以随心所欲地显示为一个组件？如何将React-Native中的字符串更改为组件？

我尝试以下，但它不工作:(

var str = '<Text>test</Text>' 
    render(){ 
     return(
      <Text>{str}</Text> 
     ) 
    }

有没有办法做到这一点，类似于阵营dangerouslySetInnerHTML？

在我的项目，我用得到JSON取就像

{ 
    content:'<p>example</p>' 
}

我想通过正则表达式的HTML元素p或他人更换成Text等，但结果是一个字符串。

我也试过react-native-html-render但它的文档是无法理解，并未表现良好。

来源

2017-03-07 MonkeyFigaro

这个问题就是这个问题http://stackoverflow.com/questions/41139643/react-native-how-to-change-text-value-dynamically/41139864#41139864 –

您可以创建一个转换你进入一个RN文本元素响应的内部HTML功能。

var str = '<p>something here</p>' 

var convertToText = (response) => { 
    var text = response.split(/[^A-Za-z]/).filter(x => x !== '').slice(1, -1).join(' ') //gives "something here"; 
    return <Text>text</Text>; 
} 

convertToText(str) === <Text>something here</Text>

来源

2017-03-07 17:40:28

谢谢，我已经编辑了我的问题，能否帮助我解决此问题？再次感谢。 – MonkeyFigaro

已更新我的答案，基本上可以使用此功能将它们转换为文本元素，但如果您需要基于响应中的内容的不同元素，则需要添加一些更多配置。 –

其实我意识到这只适用于一个单词元素，只是更新它来处理任何数量的单词。 –

var str = <Text>test</Text>; 

    render() { 
    return (
     <View style={styles.container}> 
     {str} 
     </View> 
    ); 
    }

来源

2017-03-07 16:04:06 vinayr

THX颇为相似，但实际上它是一个一个抓取的响应，所以我不能只是像你说的那样设置str ... – MonkeyFigaro

将其设置为您所在州的一部分（例如，this.state.str）。在你的构造函数中，给它一个默认值（例如，this.state = {str: "test"}）。然后在你的功能，它的获取，做setState更改值（例如，this.setState({str: response})）。最后，在渲染，这样做：

render() { 
    return (
     <View style={styles.container}> 
     <Text>{this.state.str}</Text> 
     </View> 
    ); 
    }

来源

2017-03-07 17:30:11 TheJizel

不幸的是，标签需要在编译时被合并，如JSX变得transpiled到React.createElement电话。或者你可以自己写React.createElement电话。

例如，你可以创建一个解析器比能走的JSX树在您的服务器响应。喜欢的东西

function parseResponseIntoJSXTree (string) { 
    // very psuedo example: 
    var type = parseJSXTag(string) // produces `Text` 
    var props = parseJSXTagProps(string) // produce any attribute=values 
    var innerContent = parseJSXContent(string) // produces 'something' 
    return React.createElement(type, props, children) 
}

这只是表面的划痕，因为你需要走的树，如果有子元素除根节点更深。

想我恐怖，可怕回答？包括在你的包babel做：

var renderableContent = require('babel-core', {presets: ['react-native']) 
    .transform('<Text>something</Text>')

注 - 我非常不鼓励这样，但它在技术上会工作，除非babel要求上，不会在运行时（可能）存在节点依存关系。

来源

2017-03-08 02:04:58 Atticus

谢谢！但是我写这个解析似乎有点困难。你说过的_可怕的答案......它可能是一种可用的方式来考虑。再次感谢！ – MonkeyFigaro

我的要求是类似的，使动态画面上任意部件，根据JSON服务器响应。下面是我做的：

const blockContent = [ 
    { 
    type: 'text', 
    content: 'Some title', 
    size: 20, 
    color: 'black', 
    wrapperPadding: 10 
    }, 
    { 
     type: 'text', 
     wrapperPadding: 10, 
     size: 16, 
     color: 'red', 
     content: 'Some text. Some text. Some text. Some text. Some text. ' 
    }, 
    { 
     type: 'text', 
     wrapperPadding: 10, 
     size: 16, 
     color: 'red', 
     content: 'Some text. Some text. Some text. Some text. Some text. ' 
    }, 
    { 
     type: 'link', 
     content: 'Some link', 
     size: 16, 
     color: 'blue', 
     wrapperPadding: 10, 
     url: 'http://www.google.com' 
    } 
]; 

    class CustomBlock extends Component { 

     openURL (url) { 
     Linking.openURL(url).catch(err => console.error('An error occurred', err)); 
     } 

     render() { 
     return (
      <View style={styles.container}> 
      {blockContent.map((item) => { 
       switch (item.type) { 
       case 'text': 
        return (
        <View style={{padding: item.wrapperPadding}}> 
         <Text style={{fontSize: item.size, color: item.color}}>{item.content}</Text> 
        </View> 
       ); 
       case 'link': 
        return (
        <TouchableHighlight style={{padding: item.wrapperPadding}} underlayColor="lightgrey" onPress={this.openURL.bind(this, item.url)}> 
         <Text style={{fontSize: item.size, color: item.color}}>{item.content}</Text> 
        </TouchableHighlight> 
       ); 
       } 
      })} 
      </View> 
     );

这是很容易声明您希望使用像我的文字和链接一样，和他们的风格，以及所有组件。

来源

2017-08-23 16:52:23 zoxxx

如何将React-Native中的字符串更改为组件？

回答

相关问题