2022年前端React的100道面试题的第1题:编写JSX
问题
由 JSX 编写的 React 组件,下面4个定义中正确的是哪些?
[ ] React 官方强制要求使用 JSX;
[ ] 组件除了名称必填,属性和子集都是可选定义;
[ ] 嵌套定义时,单个子集不用放在数组中;
[ ] 使用 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选择器的方式赋值属性;
-
属性定义,以对象方式描述元素的所有属性信息;
-
子集定义,子集仅支持字符串、数组方式的嵌套定义;
-
容器规则,嵌套定义时必须以数组方式,存在于一个容器元素下面;
来源
搜索《考试竞技》微信小程序