javascript - 反应提示没有出现？

Question

我现在正在开发一个组件，它是一个映射的 div 堆栈。每个人都应该有一个工具提示，但对于我的生活，我无法让工具提示出现

class App extends Component {

    constructor() {
        super();
        this.state = {
            options: [
                {
                    id: '1',
                    label: 'Industrial Truck and Tractor Operators',
                    value: '53-7051',
                    tooltip_text: 'Operate industrial trucks or tractors equipped to move materials around a warehouse, storage yard, factory, construction site, or similar location. Excludes “Logging Equipment Operators" (45-4022).',
                },
                {
                    id: '2',
                    label: 'Order Clerks',
                    value: '43-4151',
                    tooltip_text: 'Receive and process incoming orders for materials, merchandise, classified ads, or services such as repairs, installations, or rental of facilities. Generally receives orders via mail, phone, fax, or other electronic means. Duties include informing customers of receipt, prices, shipping dates, and delays; preparing contracts; and handling complaints. Excludes "Dispatchers, Except Police, Fire, and Ambulance" (43-5032) who both dispatch and take orders for services.',
                },
            ],
            value: null,
            className: '',
            selectedClassName: '',
            loading_State: true, loads
            childrenCount: 0
        };
        this.setProps = this.setProps.bind(this);
    }

    setProps(newProps) { //this is going to update the state
        this.setState(newProps);
    }

    render() {
        return (
            <div>
                <DashControlledContainer

                    setProps={this.setProps}
                    options = {this.state.options}
                    value = {this.state.value}
                    styles = {this.state.styles}
                    className = {this.state.className}
                    selectedClassName = {this.state.selectedClassName}
                    loading_State = {this.state.loading_State}
                    childrenCount = {this.state.childrenCount}
                />
            </div>
        )
    }
}

export default App;





//the component being returned with the tooltip

render(){


  return (
            <div style={this.props.styles}>
                {this.props.options.map(option => (
                <div key = {option} id={option.id} style={option.style}

                  onClick = {e=>{ //updates the props with the clicked targets value if setProps is accessible
                    if(this.props.setProps){
                      this.props.setProps({value: e.target.value})
                    }else{
                      this.setState({value:e.target.value})
                    }
                  }}
                >

                    <span  id={option.id}> {option.label} </span>
                    <UncontrolledTooltip placement="right" target={option}>
                            {option.tooltip_text}
                    </UncontrolledTooltip>

                </div>

                ))}
            </div>
        );
}

我不确定在哪里设置工具提示的目标可能就是问题所在？我一直无法在网上找到很多资源。任何帮助，将不胜感激。

标签： javascriptreactjstooltip

Answer 1

我认为您应该为id您的UncontrolledTooltip,

<UncontrolledTooltip placement="right" target={option.id}> //set id of span as a target here
    hello
</UncontrolledTooltip>