Javascript 更改映射函数onClick返回的特定组件的样式

我正在尝试更改从贴图函数返回的单个TouchableOpacity组件的样式

以下是组件：

Example = ({ props }) => {  
    return (
        <View>
            {props.listExample.map(({ id }) => {
                return (
                    <React.Fragment key={id}>
                        <TouchableOpacity
                            style={styles.button}
                            onPress={() => console.log(id)}>
                            <Image source={require('example.jpg')} />
                        </TouchableOpacity>
                    </React.Fragment>
                );
            })}
        </View>
    );
};

Example=（{props}）=>{
返回(
{props.listExample.map（{id}）=>{
返回(
console.log（id）}>
);
})}
);
};

让TouchableOpacity=TO

map函数返回大约30个具有唯一ID的TOs。当我单击TOs时，我可以在控制台日志中看到它们的唯一ID我想知道如何将个人风格修改为。

下面是我的渲染函数，它使用函数组件示例

render() {
    return (
        <View style={styles.body}>
            <ScrollView>
                <View style={styles.column}>
                    <this.Example props={{ listExample: this.getList() }} />
                </View>
            </ScrollView>
        </View>
    );
}

render（）{
返回(
);
}

我尝试过的：

引用时，我尝试创建一个函数，该函数在单击时将的样式更改为。但由于映射方式的不同，这一结果改变了UI中的所有TOs。 我试过下面的方法

Example = ({ props }) => {  
    return (
        <View>
            {props.listExample.map(({ id }) => {
                let buttonStyle = this.state.pressed ? styles.button : styles.buttonClicked
                return (
                    <React.Fragment key={id}>
                        <TouchableOpacity
                            style={buttonStyle}
                            onPress={() => console.log(id)}>
                            <Image source={require('example.jpg')} />
                        </TouchableOpacity>
                    </React.Fragment>
                );
            })}
        </View>
    );
};

Example=（{props}）=>{
返回(
{props.listExample.map（{id}）=>{
let buttonStyle=this.state.pressed？styles.button:styles.buttonClicked
返回(
console.log（id）}>
);
})}
);
};

但如前所述，这改变了所有可触摸的不透明性。有没有办法只改变一个

谢谢

编辑-显示整个班级

class Page extends Component {

    constructor(props) {
        super(props)
    }

    MyButton = ({ onButtonPressed = () => {} }) => {
        const [isPressed, setIsPressed] = useState(false);
        const onPressed = () => {
          setIsPressed(!isPressed);
          onButtonPressed();
       }
       return (<TouchableOpacity style={isPressed ? styles.pressedButton: styles.button}
                   onPress={onPressed}>
                   <Image source={require('example.jpg')} />
                </TouchableOpacity>
       );
    }

    Example = ({ props }) => {
        return (
            <View>
                {props.listExample.map(({ id }) => {
                    return (
                        <MyButton key={id}/>
                    );
                })}
            </View>
        );
    };

    render() {
        return (
            <View style={styles.body}>
                <ScrollView>
                    <View style={styles.column}>
                        <this.Example props={{ listExample: this.getList()}} />
                    </View>
                </ScrollView>
            </View>
        );
    }

}

类页扩展组件{
建造师（道具）{
超级（道具）
}
MyButton=（{onButtonPressed=（）=>{}}）=>{
const[isPressed，setIsPressed]=useState（false）；
const onPressed=（）=>{
已设置压力（！已设置压力）；
onButtonPressed（）；
}
返回(
);
}
示例=（{props}）=>{
返回(
{props.listExample.map（{id}）=>{
返回(
);
})}
);
};
render（）{
返回(
);
}
}

将地图中的组件分离到一个单独的组件，然后在按下按钮时处理样式更改更容易

const MyButton = ({ onButtonPressed = () => {} }) => {
    const [isPressed, setIsPressed] = useState(false);
    const onPressed = () => {
      setIsPressed(!isPressed);
      onButtonPressed();
   }
   return (<TouchableOpacity style={isPressed ? styles.pressedButton: styles.button}
               onPress={onPressed}>
               <Image source={require('example.jpg')} />
            </TouchableOpacity>
   )
}

constmybutton=（{onButtonPressed=（）=>{}}）=>{
const[isPressed，setIsPressed]=useState（false）；
const onPressed=（）=>{
已设置压力（！已设置压力）；
onButtonPressed（）；
}
返回(
)
}

所以你可以像这样在地图上使用

Example = ({ props }) => {  
    return (
        <View>
            {props.listExample.map(({ id }) => {
                return (
                    <MyButton key={id} />
                );
            })}
        </View>
    );
};

Example=（{props}）=>{
返回(
{props.listExample.map（{id}）=>{
返回(
);
})}
);
};

如果您只想在css

id={id}

中设置一个id的样式，您可以指定一个id，或者您可以通过隐式传递的

事件访问onClick函数中的单击目标，或者，您可以更新state onClick，并在rerender上有条件地设置相关元素的样式。如果我像这样创建TouchableOpacity:
，那么我将如何修改该TouchableOpacity的样式？我看到它会有一个唯一的ID，我只是不知道如何在样式中访问它。所以我会将这个组件（MyButton）嵌入到地图中，我现在有另一个TouchableOpacity？这似乎是一个很好的解决方案，我理解它如何解决我的问题，但我似乎不知道如何将其嵌入map函数中。是不是像
？谢谢你的更新，是的，这就是我尝试过的。但我有个问题。如果我像您所说的那样定义它，它将显示意外的标记。我认为这是因为我无法在JavaScript类中定义类似的内容。但是，如果我删除
常量
，它将找不到变量
MyButton
。我也试过
，它说它没有定义。如果这是琐碎的，我很抱歉，我是RN和JS的新手。你能给我看看你迄今为止尝试过的完整代码吗？我所有的代码都在一个类中，比如：
class Ex extensed component{…}
。那么我该如何定义这个常量MyButton呢？我可能应该在最初的文章中更清楚地说明这一点。完全在示例之外定义MyButton，它们的级别相同