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

Question

嗨

我正在实施第 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>)

小写标签假定为 built-in HTML。要引用 user-defined 类和函数，您需要使用大写名称。所以 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>
    );
};

why alert is not display while using pure function in react?