如何让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>

  )

}