Javascript 如何在functional react中获取JSX标记属性？

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

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

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

使用e.hex，我可以访问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
}

尝试：

似乎react color向handleChange函数发送了第二个参数，请尝试：

---

react color似乎向handleChange函数发送了第二个参数根据文档，该方法可以接收两个参数，即示例中的颜色，即e和事件参数。尝试访问第二个，然后查看该属性是否在其中可用。如果是，你可以去，如果不是：

由于react color不是从头创建的组件，因此了解其道具如何处理的唯一方法是检查其内部代码，并在必要时对其进行修改。你很可能不需要/不想那样做

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

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

顺便说一句，如果要计算属性名，应该使用方括号[]，如上面的示例所示

---

希望这有帮助。

根据文档，该方法可以接收两个参数，即示例中的颜色，即e和事件参数。尝试访问第二个，然后查看该属性是否在其中可用。如果是，你可以去，如果不是：

由于react color不是从头创建的组件，因此了解其道具如何处理的唯一方法是检查其内部代码，并在必要时对其进行修改。你很可能不需要/不想那样做

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

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

顺便说一句，如果要计算属性名，应该使用方括号[]，如上面的示例所示

---

希望这有帮助。

试试e.target.namee.target是未定义的。看起来这需要两个参数，所以签名应该是：handleChange=color，event=>{}，您可以使用console.logevent.target记录对象引用，但是看起来SketchPicker并没有在返回的对象中设置html属性。有一个div，但e.target.name不存在。有一个id，但它始终是空字符串，即使在我设置react时，我认为react会带来访问JSX attributestry e.target.namee.target的默认功能。它是未定义的。看起来它包含两个参数，所以签名应该是：handleChange=color，event=>{}，您可以使用console.logevent.target记录对象引用，但是看起来SketchPicker并没有在返回的对象中设置html属性。有一个div，但e.target.name不存在。有一个id，但它始终是空字符串，即使在我设置react时，我认为react会带来一个默认功能来访问JSX AttributesOrry，但这不起作用。target.name未定义。这不起作用，target.name仍未定义。另外，名称也不是很重要，但是参数应该是来自Yeah和in事件的const handleChange=color，event=>{}，或者e只是颜色选择器的div，而不是react组件的对象，react组件由Sorry访问，但不起作用。target.name未定义。这不起作用，target.name仍未定义。另外，名称并不是很重要，但是参数应该是来自Yeah和in-event的const handleChange=color，event=>{}，或者e只是颜色选择器的div，而不是react组件的对象，只是为了澄清，你说我应该创建一个自己的ColorPicker组件，并通过普通道具访问属性？你在帖子中提供的ColorPicker函数已经是一个返回SketchPicker的功能组件，所以你只需要使用它。很抱歉，我不明白，只是为了澄清，你说我应该创建一个自己的ColorPicker组件，并通过普通的道具访问属性？你在帖子中提供的ColorPicker函数已经是一个返回SketchPicker的功能组件，所以你只需要这样使用它。对不起，我不明白

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