代码之家 › 专栏 › 技术社区 › user3205479

通过react.createElement中的props创建子元素

reactjs

user3205479 · 技术社区 · 6 年前

我是一个有棱角的开发人员,我刚刚开始使用 https://babeljs.io/repl .

我刚刚添加了cdn脚本标签,以便在HTML中进行反应,并开始探索 React.createElement 应用程序编程接口。

// jsx
var e2 = <div>hello</div>;

// babel generated script
var e2 = React.createElement(
    "div",
    null,
    "hello"
);
ReactDOM.render(e2, document.getElementById('root'));

我已经将babel-generated.js复制到了html中,它起作用了。后来我开始探索 props .

// jsx
const e5 = <div name="taylor">{this.props.name}</div>;

// babel generated script
const e5 = React.createElement(
    "div",
    { name: "taylor" },
    this.props.name// This throws undefined
);
ReactDOM.render(e2, document.getElementById('root'));

我肯定 this 引用窗口对象,由于props未定义,因此引发错误。那么它到底产生了什么呢?还是我遗漏了其他东西(闭包或上下文)?

只是想知道JS代码是什么让它工作的?非常感谢您的帮助。

3 回复 | 直到 6 年前

Ha. Huynh Rodrigo Oliveira 6 年前

反应有 2路要创建组件,即使用 Function 或 Class 组件,您可以参考 https://reactjs.org/docs/components-and-props.html

this 只与 等级 组件获取方式 props 用 功能 好吧,我们应该过去 道具 作为参数。

这是我的演示如何在 杰西德 https://jsfiddle.net/huynhsamha/e9sjzndL/

功能组件方式

您可以使用JSX

const E5 = (props) => <div>{props.name}</div> // create a component

const e5 = E5({name: 'taylor'})               // create an element

ReactDOM.render(e5, document.getElementById('root'));

巴别塔将产生

const E5 = props => React.createElement(
  'div',
  null,
  props.name
);
const e5 = E5({ name: 'taylor' });

ReactDOM.render(e5, document.getElementById('root'));

类组件方式

您可以使用JSX

class E6 extends React.Component {
    render() {
        return <div>{this.props.name}</div>
    }
}

const e6 = <E6 name="taylor"/>

ReactDOM.render(
  e6,
  document.getElementById('root')
);

巴别塔将产生

class E6 extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      this.props.name
    );
  }
}

const e6 = React.createElement(E6, { name: "taylor" });

ReactDOM.render(e6, document.getElementById('root'));

希望它能帮助你!

Arun AK 6 年前

你的问题的答案是 createElement 有三个参数。

要创建的元素的类型(如 div , span , h1 )或反应成分。
第二个参数是将传递给元素的属性。

a)在这里,如果元素是一个react组件,那么属性将传递给该组件,并且可以通过 this.props 就像你在代码中所做的。

b)如果它是一个HTML元素,那么它将被分配给元素本身。示例:类名、ID名、CSS样式
最后一个参数是该组件的子项。这可以是代码中显示的带引号的字符串,在这种情况下,内容将被解释为文本。

因此,如果您这样做,您的代码将正常工作:

var props = { name: "taylor" }

const e5 = React.createElement(
    "div",
    { className: "taylor", id: "asd", style: {color: 'red'} },
    'hello'+props.name
);

如果要创建反应组件,请执行以下操作:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});
var props = { name: "taylor" }

const es5component = React.createElement(Hello, props)

ReactDOM.render(es5component, document.getElementById('app'));

这是现场直播 demo

希望有帮助:)

Nafees Anwar 6 年前

this 如果你想的话,就不提任何事情 <div name="taylor">{this.props.name}</div>; 作为普通的JSX(即使它是未定义的,如果您尝试在 https://es6console.com/ )

事实上 这 不涉及的内部范围 React.createElement . 它指的是 这 你在哪里执行 <div name=“Taylor”>this.props.name</div>; .

例如,如果在基于类的组件的呈现函数中编写相同的JSX, 这 将引用该组件。如果它有 name 在其属性中,它将作为参数传递给 createElement . 这个例子更详细。

import React, {Component} from 'react'

class MyComp extends Component {

    render () {
        // you have access to 'SomeName' in 'div' props not 'MyComp' props. but you are not defining div. right?
        return (<div name="SomeName">{this.props.name}</div>)
    }
}

class SomeOther extends Component {
    render () {
        // "TopLevelName" is available in MyComp as prop.
        return (<MyComp name="TopLevelName" />)
    }
}