早上好，伙计们。 我整个周末都在尝试初始化这个jQuery＆＃34; Sticky-Kit＆＃34;我的JSX内部的功能和避风港能够：
$(".product-intro__images").stick_in_parent({
offset_top: 10
})
我放置它进入JSX，然后我把它放在另一个Javascript文件中。我实际上检查了控制台，我确实有GET调用工作，但没有任何反应。然后我意识到，由于ReactJS使用虚拟DOM，这必然是同步问题。
正如你所看到的，我打电话给一个名为＆＃34; product-intro__images＆＃34;这是父div中名为＆＃34; product-intro＆＃34;的列。在这里你可以看到它：
<div className="product-intro__images">
<div className="product-gallery">
<ul className="product-gallery-thumbs__list">
{images.map(function(imageProps) {
return (
<li className="product-gallery-thumbs__item" key={ imageProps.src }>
<img src={ imageProps.src } alt={ imageProps.alt } />
</li>
);
})}
</ul>
<div className="flexslider">
<ul className="slides product-gallery-images__list">
<li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/76BD22")} /></li>
<li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/FFC82E")} /></li>
<li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/0084D9")} /></li>
<li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/76BD22")} /></li>
<li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/FFC82E")} /></li>
<li className="product-gallery-images__item"><img src={("http://placehold.it/1000x1000/0084D9")} /></li>
</ul>
</div>
</div>
</div>
在这个专栏的旁边还有一个名为＆＃34; product-intro__details＆＃34;应该像这个一样滚动，＆＃34; product-intro__images＆＃34;仍然坚持其父母div。这些列中的每一列都放在一个const中，并且通过扩展，放在一个组件内部，该组件按照以下方式呈现：
return
(
<body id="product-page" className={modalClass} >
<section className="page-section ps-product-intro">
<div className="container">
<div className="product-intro">
{ProductImages}
{ProductDetails}
</div>
</div>
</section>
</body>
所以基本上就是这样：我该如何调用这个jQuery函数？
PS：还有另一个javascript，当然，名为sticky-kit.min.js，已经被我的application.js中的require方法调用了。
答案 0 :(得分：2)
在您的组件的渲染中：
public class MainActivity extends AppCompatActivity {
private Bundle bundle;
private SessionManager session;
private DrawerLayout drawerLayout;
private ActionBarDrawerToggle actionBarToggle;
private TextView cartItemCountDisplay;
private NavigationView sideNavView;
private Menu sideNavViewMenu;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
drawerLayout = (DrawerLayout) findViewById(R.id.main_activity_page);
actionBarToggle = new ActionBarDrawerToggle(this, drawerLayout, R.string.OPEN, R.string.CLOSE);
drawerLayout.addDrawerListener(actionBarToggle);
actionBarToggle.syncState();
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
bundle = new Bundle();
sideNavView = ((NavigationView) findViewById(R.id.side_nav_drawer));
sideNavViewMenu = sideNavView.getMenu();
//To Display Home Fragment On Page Load
displaySelectedItemResult(sideNavViewMenu.findItem(R.id.nav_home));
//To Adjust Login or Logout option in side navigation menu
if (session.isUserLoggedIn()) {
sideNavViewMenu.findItem(R.id.nav_login).setVisible(false);
sideNavViewMenu.findItem(R.id.nav_logout).setVisible(true);
} else {
sideNavViewMenu.findItem(R.id.nav_login).setVisible(true);
sideNavViewMenu.findItem(R.id.nav_logout).setVisible(false);
}
//Operation on side navigation item click
sideNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
displaySelectedItemResult(item);
//navDrawerLayout.closeDrawers();
return true;
}
});
}
private void displaySelectedItemResult(MenuItem item) {
sideNavViewMenu.findItem(R.id.nav_home).setChecked(false);
sideNavViewMenu.findItem(R.id.nav_contactUs).setChecked(false);
sideNavViewMenu.findItem(R.id.nav_aboutUs).setChecked(false);
sideNavViewMenu.findItem(R.id.nav_login).setChecked(false);
sideNavViewMenu.findItem(R.id.nav_logout).setChecked(false);
Fragment fragment;
switch (item.getItemId()) {
case R.id.nav_user:
if (session.isUserLoggedIn()) {
item.setTitle(session.getUserDetails().get(SessionManager.KEY_NAME));
} else {
item.setTitle("Login First!");
}
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.nav_home:
fragment = new HomeFragment();
if (fragment != null) {
callNavMenuItemsFragment(fragment, "FRAG_HOME");
}
item.setChecked(true);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.nav_contactUs:
fragment = new ContactUsFragment();
if (fragment != null) {
callNavMenuItemsFragment(fragment, "FRAG_CONTACT_US");
}
item.setChecked(true);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.nav_aboutUs:
fragment = new AboutUsFragment();
if (fragment != null) {
callNavMenuItemsFragment(fragment, "FRAG_ABOUT_US");
}
item.setChecked(true);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.nav_login:
new UserAuthentication(MainActivity.this, session).loginAndSignupDialog();
sideNavViewMenu.findItem(R.id.nav_login).setVisible(false);
sideNavViewMenu.findItem(R.id.nav_logout).setVisible(true);
item.setChecked(true);
drawerLayout.closeDrawer(GravityCompat.START);
break;
case R.id.nav_logout:
session.logoutUser();
sideNavViewMenu.findItem(R.id.nav_login).setVisible(true);
sideNavViewMenu.findItem(R.id.nav_logout).setVisible(false);
item.setChecked(true);
drawerLayout.closeDrawer(GravityCompat.START);
break;
default:
}
}
private FragmentTransaction callNavMenuItemsFragment(final Fragment fragment, final String fragmentTag) {
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.addToBackStack(null);
//if (!ACTIVE_FRAGMENT_ID.equals(String.valueOf(fragment.getId()))) {
if (!activeFragmentIDsList.contains(String.valueOf(fragment.getId()))) {
ft.replace(R.id.fragment_container, fragment, fragmentTag);
activeFragmentIDsList.add(String.valueOf(fragment.getId()));
}
ft.commit();
return ft;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
if (actionBarToggle.onOptionsItemSelected(item)) {
return true;
}
switch (item.getItemId()) {
case android.R.id.home:
finish();
break;
case R.id.cart:
if (session.isUserLoggedIn()) {
startActivity(new Intent(MainActivity.this, CartActivity.class));
} else if (new UserAuthentication(MainActivity.this, session).loginAndSignupDialog()) {
startActivity(new Intent(MainActivity.this, CartActivity.class));
}
break;
default:
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.actionbar_menu, menu);
final MenuItem menuItem = menu.findItem(R.id.cart);
MenuItemCompat.setActionView(menuItem, R.layout.cart_badge_layout);
final View actionView = MenuItemCompat.getActionView(menuItem);
cartItemCountDisplay = actionView.findViewById(R.id.cart_badge);
setupBadge();
actionView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
setupBadge();
onOptionsItemSelected(menuItem);
}
});
return super.onCreateOptionsMenu(menu);
}
private void setupBadge() {
int itemCount = (((AppGlobalContent) getApplicationContext()).getSelectedItemsCount());
if (cartItemCountDisplay != null) {
if (itemCount == 0) {
if (cartItemCountDisplay.getVisibility() != View.GONE) {
cartItemCountDisplay.setVisibility(View.GONE);
}
} else {
cartItemCountDisplay.setText(String.valueOf(Math.min(itemCount, 99)));
if (cartItemCountDisplay.getVisibility() != View.VISIBLE) {
cartItemCountDisplay.setVisibility(View.VISIBLE);
}
}
}
}
@Override
public void onBackPressed() {
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
}
然后：
<div className="product-intro__images" ref={el => this.productIntro = el}>
你甚至可以直接在ref回调中执行此操作：
componentDidMount(){
$(this.productIntro).stick_in_parent()
}
但请记住，将管理DOM的东西与React代码直接混合并且取决于插件并不是一个好主意 - 但可能会出现意外行为或副作用。
您可能还需要在ref={el => $(el).stick_in__parent()}
确保您componentWillUnmount(){}和插件一样。