相关疑难解决方法(0)

我正在使用React构建一些东西,我需要在JSX中使用React Variables插入HTML.有没有办法让变量像这样:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

并将其插入反应中,并让它工作？

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

并按预期插入HTML？我没有看到或听到任何关于可以执行此内联的react函数,或者解析可以使其工作的事物的方法.

那么这是用reactjs渲染原始html的唯一方法吗？

// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
  render: function() {
    var rawMarkup = converter.makeHtml(this.props.children.toString());
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
      </div>
    );
  }
});

我知道有一些很酷的方法来标记JSX的东西,但我主要感兴趣的是能够渲染原始的html(包括所有类,内联样式等).像这样复杂的东西:

<!-- http://getbootstrap.com/components/#dropdowns-example -->
<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation"><a role="menuitem" …

我希望能够使用HTML标记传递文本,如下所示:

<MyComponent text="This is <strong>not</strong> working." />

但是在MyComponent渲染方法中,当我打印出来时this.props.text,它会打印出所有内容:

This is <strong>not</strong> working.

有没有办法让React解析HTML并将其正确地转储出去？

我正在使用i18next为我的博客提供i18n电源.它在纯文本内容上运行良好,但是当我尝试翻译包含HTML标记的内容时,它在翻译文本时显示原始标记.

举个例子,这里是一个帖子的标记片段,它没有按预期工作:

<div class="i18n" data-i18n="content.body">
  In Medellín they have many different types of <i>jugos naturales</i>&nbsp;(fruit juice) ... <br />
  <br />
  ...
</div>

翻译代码如下所示:

var resources = {
  "en": ...,
  "es": {
    "translation": {
      "content": {
        "body": "En Medellín hay varios tipos diferentes de <i>jugos naturales</i> ... <br /><br /> ... "
      }
    }
  }
}

i18n.init({"resStore": resources}, function( t ) {
  $('.i18n').i18n();
});

呈现翻译时,HTML标记将被转义并作为文本输出:

En Medellín hay varios tipos diferentes de <i>jugos naturales</i>...<br /><br />

如何让i18next更改已翻译元素的HTML？

我如何取一个字符串,并将其转换为jsx？例如,如果我从a引入一个字符串textarea,我怎么能将它转换为一个React元素;

var jsxString = document.getElementById('textarea').value;

我将使用什么过程在客户端上转换它？可能吗？

我将从我的模板渲染中获取动态html内容,该内容由其他反应组件呈现.我如何将这个html字符串转换为React组件,以便我可以在我的渲染函数中使用该组件.请注意,我想保留用于差异的特定反应属性.

React.createClass( {
  var self = this;

  componentWillMountDown : function() {
    //htmlString is essentially huge dynamic one in my actual case
    var htmlString = "<div class='classDiv' react-id="0.1"><input type='text'/></div>";
    self.setState({responseString : htmlString});
    self.forceUpdate();
  },
    
  render: function() {
    var Response = this.state.responseString;
    //how would I return the react component as response?
    return (<Response/>); //does not work. err is it shd be valid react component
   }
});

我已经尝试将htmlString转换为HTMLDocument对象,并在willmount回调中递归创建React.createElement并设置react组件.但是,错误是类型toUpperCase未定义.

我使用setState来更新部分html,但我发现新的更新html没有呈现.这是代码,js小提琴:

HTML:

<div>hello<br />world<br /></div>
<div id='content'></div>

JS:

var Main = React.createClass({
    getInitialState: function() {
        return {output: 'hello<br />world<br />'};
      },
    render: function() {
        return (
            <div>           
                {this.state.output}
            </div>
        );
        }
});

React.renderComponent(<Main/>, document.getElementById('content'));

我省略了从服务器更新html的部分,但结果是一样的.如何让字符串处于状态？

从 php 我返回这个 html

PHP

$str = "Hello World";
echo json_encode("returnval"=>format_string($str));

function format_string($str){
  return "<b>".$str."</b>";
}

反应 JSX

render () => {
   //returnval = html string returned from php

   return (
     <div>
         {returnval} 
         <div>
              <span>Some data</span>
         </div>
     </div>
   );
}

上面的内容打印<b>Hello World</b>为文本。

但我希望执行html 标签（在本例中为粗体）

由于某些原因，我无法format_string在 jsx 中编写该函数，有什么办法可以解决这个问题吗？

什么之间的区别import React from 'react'，并import React { Fragment } from 'react'在背景下<React.Fragment>，<Fragment>和<>？

我的意思是，当我们导入的内容发生React并{ Fragment }从一个模块在同一行？

我们是否创建的实例，<Fragment>而这只是后台的几百行代码？

还是这只是正常现象，每个人都可以做到而不会降低性能？

React官方博客文章提到您可以做到这一点const Fragment = React.Fragment，它们在示例中使用。

但为什么？

我正在尝试将以下代码发送到 React js 中的子组件：

{\n    carPhoto: "../../images/small-logo.jpg",\n    make: "Mercedes",\n    price: "\xe2\x82\xac20000",\n    desc: "Vivamus gravida magna massa in cursus mi"\n}\n

现在我试图将desc分成两行。\n我尝试使用\\n、\\r、\\r\\n

desc: "Vivamus gravida magna<br /> massa in cursus mi"\ndesc: "Vivamus gravida magna\\nmassa in cursus mi"\ndesc: "Vivamus gravida magna\\r\\nmassa in cursus mi"\n

但没有任何效果。有什么建议吗？

我有一个带帖子的JSON表.内容以HTML格式提供,当我尝试在React中呈现它时:

  return (
    <article>
      <h2><a href={post.link}>{post.title.rendered}</a></h2>
      <div className="post__content">{post.content.rendered}</div>
    </article>
  )

我正在打印(转义)完整的HTML标记.我该怎么办？

我的状态变量中有一个 HTML 标记值，如下所示

this.state = {
    value: '<p>This is a paragraph</p>'
}

我想在我的子组件中显示此 HTML 内容。我正在尝试做

<Childcomponent value={this.state.value} />

这样我就可以使用 来props访问子组件内的值。我的子组件是

render() {
    return(
        <div>{this.props.value}</div>
    )
}

但这会产生一些错误。我怎样才能解决这个问题？还有其他解决办法吗？提前致谢。