2022年前端React的100道面试题的第1题： JSX的编写

问题

由 JSX 编写的 React 组件，下面4个定义中正确的是哪些？

选项

A React 官方强制要求使用 JSX；

B 组件除了名称必填，属性和子集都是可选定义；

C 嵌套定义时，单个子集不用放在数组中；

D 使用 React.createElement 方法时组件只支持 React.Component 的子类或者普通函数，不支持字符串；

答案

B

解答

JSX的解析是通过 React.createElement(component, props, ...children) 语法。因此，使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。

官方的例子非常好的说明一点，用 JSX 编写的代码：

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}
​
ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

可以编写为不使用 JSX 的代码：

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}
​
ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

因此我们可以得出 React 组件的定义规则：

• 名称定义，标签字符串或组件对象名称，且标签支持CSS选择器的方式赋值属性；

• 属性定义，以对象方式描述元素的所有属性信息；

• 子集定义，子集仅支持字符串、数组方式的嵌套定义；

• 容器规则，嵌套定义时必须以数组方式，存在于一个容器元素下面；

参考资料

不使用 JSX 的 React

react-hyperscript

来源

《考试竞技》微信小程序