如何检查按钮类的道具？

如何解决如何检查按钮类的道具？

目标

我正在尝试编辑现有的reactjs代码以在现有按钮下添加。有问题的现有按钮是麦克风（如下所示），当前允许用户静音和取消静音。 （我在图片中添加了文本“静音/取消静音”，只是为了演示我要在何处添加此新文本。根据当前状态，它必须为“静音”或“取消静音”。

已经有逻辑将图标从常规麦克风更改为带有一条线的麦克风。我不能说我了解它的工作原理。

问题

我不是React js编程人员，所以我不知道如何访问现有AudioMutedButton的属性/状态。

基类-AudioMuteButton.js

如下所示，基类导出一些状态信息，包括_audioMuted：

_setAudioMuted(audioMuted: boolean) {
    this.props.dispatch(muteLocal(audioMuted));
    console.log("this is setting the mute state")
}

function _mapStateToProps(state): Object {
    const _audioMuted = isLocalTrackMuted(state['features/base/tracks'],MEDIA_TYPE.AUDIO);
    const _disabled = state['features/base/config'].startSilent;

    return {
        _audioMuted,_disabled
    };
}

**表示层-AudioSettingsButton.js **

此文件似乎包含显示有问题的“音频”按钮的层。

   import AudioMuteButton from '../AudioMuteButton';

     render() {
        const { isDisabled,onAudioOptionsClick,visible } = this.props;
        const settingsDisabled = !this.state.hasPermissions
            || isDisabled
            || !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();

        return visible ? (
            <AudioSettingsPopup>
                <ToolboxButtonWithIcon
                    icon = { IconArrowDown }
                    iconDisabled = { settingsDisabled }
                    onIconClick = { onAudioOptionsClick }>
                    <AudioMuteButton />                        
                </ToolboxButtonWithIcon>
            </AudioSettingsPopup>
        ) : null;
    }
}

我将其更改为包括新的if语句和React.Fragment，如下所示：

render() {
    const { isDisabled,visible } = this.props;
    const settingsDisabled = !this.state.hasPermissions
        || isDisabled
        || !JitsiMeetJS.mediaDevices.isMultipleAudioInputSupported();
    var message;
   console.log(this.props._audioMuted)

    if (this.props._audioMuted) {
           message = "muted"
    } else {
         message = "unmuted"
    }
    return visible ? (
        <AudioSettingsPopup>
            <ToolboxButtonWithIcon
                icon = { IconArrowDown }
                iconDisabled = { settingsDisabled }
                onIconClick = { onAudioOptionsClick }>
                <React.Fragment>
                    <div><AudioMuteButton /></div>
                 render(<div>{message}</div>  )
                </React.Fragment>
            </ToolboxButtonWithIcon>
        </AudioSettingsPopup>
    ) : null;
}

按钮的外观：

“音频设置”按钮是带麦克风的向下按钮/ V形符号的小按钮，而不是麦克风本身。 我要向其添加文本的按钮是主按钮-上面有麦克风。

问题

我没有任何错误，道具在控制台中显示为未定义。 因此，我显然无法正确访问该状态。

任何提示都值得赞赏。

解决方法

我看到您有audioMuted道具。现在，您需要为向组件提供audioMuted的状态创建处理程序。处理程序可以是这样的：

const mutedHandler = () => {
  this.setState({audioMuted: !this.audioMuted})
}

，然后您可以添加一条if语句，以检查this.audioMuted是否是true中的false，例如：

this.audioMuted ? <p>Unmute</p> : <p>mute</p>

,

使用三元运算符检查状态 {this._renderAudioButton（）== true吗？ true：false}