Question

我正在尝试为使用<script type="text/template"></script>呈现网页元素的项目做出贡献。

我的贡献是将页面元素更改为反应组件。但是，当我命令使用ReactDOM.render()在特定div中进行渲染时，我收到错误消息

未捕获错误：_registerComponent（...）：目标容器不是DOM元素。

我知道这意味着react没有找到div在哪里渲染，所以我需要在div之后加载react脚本，我已经尝试了但是错误再次存在。

我已尝试加载反应脚本，否则就像这样

<script type="text/template">   
  <ul class="new-component-template" id="xblocklist" >
  </ul>
  <script type="text/babel" src="path to react file"/>
</script>

但是当我加载页面时，错误消失了，根本没有加载脚本。

我需要的是在调用外部脚本时加载脚本， I.E 我可以在<script type="text/template"></script>内编写一个实际加载反应脚本的函数。

更新

var ListXblocks = React.createClass({

componentWillMount: function(){
 this.setState({Problemstyle: this.props.Problemstyle})
 fetch('http://192.168.33.10:8002/XBlocks/')
 .then(result=>result.json())
 .then(result=> {
   this.setState({items:result})
 })
 },

 render:function(){
 return(

  <div>
    {
      this.state.items.map((item)=>{return(
        <li className="editor-manual" key={item.title}>
          <button type="button" className="button-component" data-category="problem" data-boilerplate="">
            <span className="name">{item.description}</span>
          </button>

        </li>)})

      }
  </div>

  );

  }

  });

  ReactDOM.render(<ListXblocks/>, document.getElementById('xblocklist'));

Answer 1

带type="text/template"的脚本标记并没有做任何特别的事情，它只是让浏览器忽略其中的内容。这种方法通常用于像handlebarjs这样的模板系统，而React并不支持它。您可以阅读有关此here的更多信息。因此，如果您将React脚本放在其中，浏览器也会忽略它。

由于您的ul标记不是html元素，document.getElementById('xblocklist')将返回null。这就是为什么你得到＆＃34;目标容器不是DOM元素。＆＃34;错误。因此，您必须手动或使用JavaScript从脚本标记中获取html。

在文本/模板脚本中加载反应脚本

1 个答案: