0

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

我的贡献是将页面的元素更改为 React 组件。但是，当我命令反应在特定 div 中呈现时，ReactDOM.render()我收到一条错误消息

未捕获的错误：_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>

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

我需要的是在调用外部脚本时加载脚本，IE我可以在里面写一个函数<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'));
4

1 回答 1

0

Script 标签type="text/template"并没有做任何特别的事情，它只是让浏览器忽略它里面的内容。这种方法通常由像handlebarjs 这样的模板系统使用，而React 不支持它。您可以在此处阅读有关此内容的更多信息。所以如果你把你的 React 脚本也放在里面，浏览器也会忽略它。

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

于 2017-05-20T05:07:18.570 回答