问题
由 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 组件的定义规则(componentOrTag、properties、children、listOfElements):
- 名称定义,标签字符串或组件对象名称,且标签支持CSS选择器的方式赋值属性;
- 属性定义,以对象方式描述元素的所有属性信息;
- 子集定义,子集仅支持字符串、数组方式的嵌套定义;
- 容器规则,嵌套定义时必须以数组方式,存在于一个容器元素下面;
参考资料
来源
搜索《考试竞技》微信小程序