时间戳

首页 > 解决方案 > 如何在功能反应中获取 JSX 标签属性？

javascript - 如何在功能反应中获取 JSX 标签属性？

问题描述

我想了解如何在反应中访问组件标签的自定义属性。不幸的是，我在互联网上找不到任何东西，因为我找不到要搜索的内容，所以我没有得到大量解释如何将道具传递给组件的网站。

我正在使用 react-color，当颜色选择器发生变化时，它会向我发送一个“e”中的对象到 handleChange 函数。

const colorPicker = () => {
    return(
        <SketchPicker name="fill" onChange={handleChange} />
    );
}

使用 e.hex 我可以访问十六进制的颜色，但是如何访问属性“名称”？

const handleChange = (e) => {
    console.log("handleChange", e);
    context.object().set({fill: e.hex}); //<- works
    //context.object().set({e.name: e.hex}); doesn't work <- e.name is undefined
}

标签： javascriptreactjs

解决方案

根据文档，onChange方法可以接收两个参数，颜色（在您的示例中为e）和事件参数。尝试访问第二个并查看该属性是否可用。如果是，你很高兴，如果不是：

由于 react-color 是一个您没有从头开始创建的组件，因此了解其 props 处理方式的唯一方法是检查其内部代码并在必要时对其进行修改。您很可能不需要/不想这样做。

如果name属性很可能是动态的，则将其传递给colorPicker并通过 props.name 访问它：

<SomeComponent>
  <ColorPicker name={'fill'}/>
</SomeComponent>

然后从 ColorPicker 组件中：

const handleChange = (e) => {
  context.object().set({[props.name]: e.hex}); 
}

顺便说一句，如果您正在计算属性名称，您应该使用方括号[]，例如上面的示例。

希望这可以帮助。

推荐阅读