小编Jay*_*vel的帖子

我在我的React App中使用jQuery可嵌套插件 https://dbushell.com/Nestable/.我知道在React中使用jQuery时会出现问题.

jQuery nestable解决了我的业务需求,无法找到反应拖动/嵌套组件的确切要求.所以我使用了这个jQuery插件.

真正的问题是:在使用这个jQuery插件拖动一个元素时,它会克隆DOM,除此之外一切都在做出反应.

初始化了jQuery可嵌套功能,如下所示:

componentDidMount() {
    this.$node = $(this.nestable); // this.nestable is a ref

    this.$node.nestable({
        group: 1,
        maxDepth: 4,
        expandBtnHTML:"",
        collapseBtnHTML:""
    });
}

上面的代码将让我在所有其他DOM元素中拖动group2,如下图所示:

group2是这里的可拖动元素.

拖了之后,我可以看到group2出现了两次,我猜jQuery插件克隆拖动的元素,如下所示:

在开发人员工具中:

但在反应开发人员工具中,我可以看到DOM是正确的.

我不知道,如何纠正这个问题.我无法在此更新完整代码,因为代码库很大.

在反应开发工具中,我可以看到DOM是正确的,而在原生DOM中则不行!

是否可以在setState之后用虚拟DOM替换原生DOM,或者是否可以对jQuery处理的跟踪DOM做出反应？

我接受@ Patrick Evans的评论,我正在寻找这里的解决方案或者像jQuery nestable这样的基于反应的组件.

对此有任何帮助将有所帮助.

我想在反应组件加载后立即将焦点设置在按钮上，以便用户可以仅使用键盘按下按钮。

这就是我试图做的，但这似乎不起作用。

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.logButton = React.createRef();

  }

  componentDidUpdate(){
     this.logButton.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <Button ref={this.logButton}  outline color="primary" size="sm" onClick={this.logManualRequestModal}>
         Log request
        </Button>
      </div>
    );
  }
}

我正在使用tabler-react组件

我正在使用 google-login 包。我试图更新按钮的背景图像和尺寸，它似乎不起作用还是我做错了？我在文档中找不到关于如何实现内联样式的任何示例。我刚刚读到它是一个对象，这是我的代码。

 <GoogleLogin
    className="rounded-circle"
    icon={false}
    clientId={process.env.REACT_APP_CLIENT_ID}
    buttonText=""
    onSuccess={this.responseGoogle}
    onFailure={this.responseGoogle}
    style={{  backgroundImage:url(${val.image.url}),
       width:50,
       height:50  
   }}
 />

插件对此的任何帮助都会有所帮助。

按钮组件，根据父应用程序发送的 prop dataSrc 呈现按钮。

 export default class Button extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return(
            <div>
                {this.props.dataSrc.map((element, index) => {
                    return <button 
                        key={index}
                        className={`btn btn-default ${element.class} ${element.secondary ? "btn-secondary" : ""}`}
                        type="button"
                        disabled={element.disabled}>
                            {element.label}
                    </button>
                })} 

            </div>

        );      
    }
}

父组件App将dataSrc发送给Button。

class App extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        const btnSrc = [
            {
                "label":"Save",
                "class":"user_information_save",
                "disabled":false
            },
            {
                "label":"Cancel",
                "class":"userCancel",
                "disabled":false
            }
        ]
        return <Button dataSrc={btnSrc} /> 
    }
}

现在一切都很好。场景如下，App（父）组件中的 btnSrc 看起来类似：

const btnSrc = …

我不明白这在javascript中是如何工作的

renderMarkButton(type, icon) {

它看起来像一个箭头功能,但没有箭头.这是上下文:

class HoverMenu extends React.Component {

  renderMarkButton(type, icon) {
    const { editor } = this.props
    return (
      <div className="editorButton" 
            onMouseDown={event => this.onClickMark(event, type)}>
        <FontAwesomeIcon color="#666" active={isActive} 
            className="editorButton" icon={icon}  />
        </div>
    )
  }
  render() {
    return (
      <div>
        {this.renderMarkButton('bold', {...faBold})}
      </div>
    )
  }
}

我也很困惑

  const { editor } = this.props

我相信它来自Slate.我希望this.props在这种情况下是{type,icon}.