Question

我有一个关于ReactJs Render()功能的一般性问题。假设我们在index.html中有一些HTML

<section id="Hello">
    <h1>Hello world</h1>
    <p>Something something Darkside</p>
</section>

反应类

var Hello = React.createClass({
  render: function() {
    ...
  }
});

我们可以将#Hello的内容传递给react类进行渲染，而不是编写JSX吗？

此外，是否可以在index.html源代码中使用此功能

<Hello>
    <h1>Hello world</h1>
    <p>Something something Darkside</p>
</Hello>

并自动将其连接到React Class

var Hello = React.createClass({
  render: function() {
    ...
  }
});

此处<Hello />会自动连接到班级吗？

这类似于Angulars <ng-content />和对象的初始化

Answer 1

我还没有根据我的知识运行代码片段进行测试。你可以这样做：

<Hello id='hello-id'></Hello>
<script type='text/babel'>
var Hello = React.createClass({
  render: function() {
        return(
            <div>
                {this.props.children}
            </div>
        );
  }
});

ReactDOM.render(
    <Hello>
        <h1>Hello world</h1>
        <p>Something something Darkside</p>
    </Hello>,
    document.getElementById('hello-id')
);
</script>

结果应该是：

<Hello id='hello-id'>
    <div>
        <h1>Hello world</h1>
        <p>Something something Darkside</p>
    </div>
</Hello>

this.props.children（Children props）可用于将子元素传递给react组件 Hello中的ReactDOM.render与Hello类相关联。但是html源代码中的<Hello/>不是。它只是自定义的html标签。

Answer 2

如果您在第一个问题中的目标只是为了反应而不使用jsx而呈现#Hello html，那么您将需要使用纯JavaScript REACT语法。

这样的事情：

<body>
    <div id='container'></div>

    <script>
        var Hello = React.createClass({
          render: function() {
            return React.createElement(
                'section',
                { id: 'Hello' },
                React.createElement('h1',null, 'Hello world'),
                React.createElement('p',null,'Something something Darkside')
            );
          }
        });

        ReactDOM.render(React.createElement(Hello,null),document.getElementById('container'));
    </script>
</body>

如果您愿意，可以使用babel之类的东西为您生成jsx中的普通javascript。他们有一个互动工具here，您可以在其中试用。

对于您的问题＆＃34; ReactDOM.render可以在index.html中读取html的子属性吗？＆＃34;。假设你问你是否可以让ReactDOM.render返回#Hello的html。答案是不，你不能。

ReactDOM.render方法希望您返回 ReactComponent

所以这样的事情会无效：

<section id="Hello">
    <h1>Hello world</h1>
    <p>Something something Darkside</p>
</section>

<script>
var Hello = React.createClass({
  render: function() {
    return $('#Hello').html(); //<-- Error here
  }
});
</script>

给出错误：

必须返回有效的ReactComponent。你可能已经回来了 undefined，数组或其他一些无效对象。

ReactJs，必须使用渲染

2 个答案: