为什么在使用纯函数反应时不显示警报？

Question

https://plnkr.co/edit/eCZSo6Rl5odN1hTb6BCW?p=preview

您好

我正在实施行component，当用户在输入字段中填充项目并按add按钮

时会添加

var listItems = this.props.names.map(function(d, idx){
      return (<r key={idx}></r>)
    })

但是当我们尝试添加组件

时它不显示警告

const r = (props) => {
    alert('---')
    return (
        <li>
            <span>hiii</span>
        </li>
    );
};

任何更新??

Answer 1

问题在于您的JSX。

return (<r key={idx}></r>)

假设小写标签是内置HTML。要引用用户定义的类和函数，需要使用大写名称。因此，React正在寻找标准的HTML <r>代码。

如果您将功能更改为R，则事情应该有效。

有关详细信息，请参阅React docs。

Answer 2

return (<r key={idx}></r>)

更改为

return (<R key={idx}></R>)

const R = (props) => {
    alert('---')
    return (
        <li>
            <span>hiii</span>
        </li>
    );
};