如何让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) => {&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; <img src={props.src}/>&nbsp; &nbsp; &nbsp; {props.children}&nbsp; &nbsp; </div>&nbsp; )}render () {&nbsp; return (&nbsp; &nbsp; <div className='container'>&nbsp; &nbsp; &nbsp; <Picture src={picture.src}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //what is placed here is passed as props.children&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; </Picture>&nbsp; &nbsp; </div>&nbsp; )}