如何让HTML模板定义与Vue相同的React组件？

Question

在Vue中，您可以拥有类似的东西。

<!-- index.php -->

<div id="app">
    <section>
        <main>
            <h1>Main</h1>
            <some-component></some-component>
        </main>
        <aside>
            <h2>Side</h2>
            <another-component></another-component>
        </aside>
    </section>
</div>

<script>
    Vue.component('some-component', { template: '<div>hello - {{ this.$parent.test }}</div>' });
    Vue.component('another-component', { template: '<div>world - {{ this.$parent.test }}</div>' });

    new Vue({el: '#app', data: () => ({test: 123})});
</script>

这将渲染所有已注册的组件，最终您将得到类似

<div id="app">
    <section>
        <main>
            <h1>Main</h1>
            <div>hello - 123</div>
        </main>
        <aside>
            <h2>Side</h2>
            <div>world - 123</div>
        </aside>
    </section>
</div>

---

使用React如何完成同一件事？

我尝试过类似的愚蠢的事情

class App extends Component {
    render() {
        return <div>{this.props.kids}</div>
    }
}


if (document.getElementById('app')) {
    ReactDOM.render(<App kids={document.getElementById('app').innerHTML)} />, document.getElementById('app'));
}

---

总体目标是能够拥有常规的html模板，然后在需要的地方分散各种反应组件。

理想情况下，它应包含一个类似非渲染的组件，该组件可以使用上下文api提供向下的全局数据。

Answer 1

如果您想要vue /类似Angular的模板，我看不到使用React的意义，请改用vue。 如果愿意的话，React使用javascript xml或jsx，它们看上去确实像模板，但实际上为您带来了javascript可以做的所有事情的好处。

虽然，如果您希望将所有内容都放在一个组件中，那么没有什么会阻止您这样做。

现在，如果您要使用一个可以渲染所有子项的组件，那您就tbh了。 这是来自codeburst的一个简单示例

const Picture = (props) => {
  return (
    <div>
      <img src={props.src}/>
      {props.children}
    </div>
  )
}


render () {
  return (
    <div className='container'>
      <Picture src={picture.src}>
          //what is placed here is passed as props.children  
      </Picture>
    </div>
  )
}

Answer 2

React不是基于模板的，而是使用JS或JSX定义组件，因此选项受到限制。

最好是

这是可能的渲染HTML片段与dangerouslySetInnerHTML ：

<div dangerouslySetInnerHTML={this.props.kids}/>

这不允许在代码片段内使用自定义组件，因为React组件不使用选择器。 可以使用HTML解析器将模板解析为React元素的层次结构，然后用相应的React组件替换诸如<some-component>类的自定义元素，如本问题所示。

可以动态定义和转运组件，但在生产中不建议这样做：

<script src="https://unpkg.com/babel-standalone/babel.js"></script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
  var Foo = () => 'Foo';
</script>
...
<script type="text/babel">
  ReactDOM.render(<Foo/>, document.getElementById('foo'));
</script>

为了将上下文API用于多个组件，不应将它们作为具有render根组件render而应在一个公共父createPortal render ，例如，作为具有createPortal门户render ：

...
<script>
  var portals = {};
</script>
...
<script type="text/babel">
  portals['#foo'] = <Foo/>;
</script>
...
<script type="text/babel">
  // runs on page load
  var CommonContext = ...;
  var Root = () => (
    <CommonContext.Provider value={...}>
      {Object.entries(portals).map(({ selector, child }) => (
        ReactDOM.createPortal(child, document.querySelector(selector))
      )}
    </CommonContext.Provider>      
  );

  ReactDOM.render(<Root/>, document.getElementById('root'));
</script>