React.DOM.p(null, message) - explain null?

React.DOM.p(null, message) - explain null?

本文关键字：null explain message DOM React      更新时间：2023-09-26

任何人都知道这一行中的null是什么：

React.DOM.p(null, message);

我知道这是一个方便的包装createElement，即

ReactElement createElement(
  string/ReactClass type,
  [object props],
  [children ...]
)

但我很难理解为什么type null.

这里的这一行也是如此：

React.DOM.div(null, 'Hello World!')

这些函数通常被称为工厂，这意味着它们是生成具有特定类型属性ReactElements的函数。

这大致是这些工厂在引擎盖下的创建方式：

function createFactory(type) {
  return React.createElement.bind(null, type);
}

它将React.createElement作为绑定函数返回，其中this绑定到null，type绑定到传入的任何内容，允许您为元素创建速记实例化函数：

// create a function that creates React <div> elements
let div = createFactory('div'); 
// create two divs using the div factory function
let div1 = div({ /* some props */ }, 'Div 1');
let div2 = div({ /* some props */ }, 'Div 2');

React 已经为常见的 HTML 标签（如 div、li 等）提供了内置工厂，这些问题中已有

。<小时 />

但我正在努力理解为什么该类型为 null。

考虑到上述所有内容，当您查看其中一个示例时：

React.DOM.div(null, 'Hello World!')

将发生以下情况：

React.DOM.div只是一个工厂函数，在引擎盖下将'div'作为第一个参数传递给React.createElement，这是类型，其他所有内容都作为剩余参数传递。

基本思路：

// the function is created as a factory
React.DOM.div = createFactory('div');
// and used to create a <div> element
var myDiv = React.DOM.div(null, 'Hello World');

这个值div作为第一个参数，其设置方式与我在创建此工厂时显示的方式类似。

因此，在您的情况下，null只是props对象，而不是type。类型必然通过工厂div，这意味着props是第一个参数，'Hello World!'字符串是children参数。

相关文章：