0

我制作了一个静态网页应用程序，我一直在慢慢地将其转换为 React（MERN 堆栈）以使其更具动态性/因此我不必配置每个 HTML 文档。这是一个使用谷歌模型查看器的产品配置器。

我对使用全栈工作流程还很陌生，但到目前为止发现它很有趣！但是，我无法理解如何将我的一些 vanilla JS 转换为在 React 中工作。当用户单击按钮时，此特定脚本将更改源/3D 模型。下面是我目前在静态网页上工作的代码片段。

import {useEffect, useState} from "react";
import {useSelector, useDispatch} from "react-redux";

// Actions
import {getProductDetails} from "../redux/actions/productActions";

const ProductScreen = ({match}) => {

    const dispatch = useDispatch();

    const [currentSrc, setCurrentSrc] = useState()
    const [srcOptions, setSrcOptions] = useState()


    const productDetails = useSelector((state) => state.getProductDetails);
    const {loading, error, product} = productDetails;


    useEffect(() => {
      if (product && match.params.id !== product._id) {
        dispatch(getProductDetails(match.params.id));
        setCurrentSrc(product.src);
        setSrcOptions(product.srcList);
      }
    }, [dispatch, match, product]);
return (
<div className="productcreen">
  {loading ? (
  <h2> Loading...</h2>) : error ? (
  <h2>{error}</h2>) : (
  <>
    <div className='sizebuttons'>
    {srcOptions.map((src) => (
        <button onClick={() => setCurrentSrc(src)}>{src}{product.size}</button>
    ))}
    {srcOptions.map((src) => (
        <button onClick={() => setCurrentSrc(src)}>{src2}{product.size2}</button>
    ))}
    {srcOptions.map((src) => (
        <button onClick={() => setCurrentSrc(src)}>{src3}{product.size3}</button>
    ))}
    </div>
    <div className="productscreen__right">
      <model-viewer id="model-viewer" src={currentSrc} alt={product.name} ar ar-modes="scene-viewer quick-look" ar-placement="floor" shadow-intensity="1" camera-controls min-camera-orbit={product.mincameraorbit} max-camera-orbit={product.maxcameraorbit} interaction-prompt="none">
        <button slot="ar-button" className="ar-button">
                    View in your space
                  </button>
      </model-viewer>
    </div>
    </> )} )};

这是数据库的样子： 当前数据库

“product.size”是从 MongoDB 中提取的，我想知道是否可以将模型交换为：“product.src”、“product.src2”、“product.src3”（也在DB 已经）我假设我需要使用 useState 来切换源，但我不确定。任何帮助将不胜感激！如果您想查看我正在尝试完成的静态网页，如果有帮助，您可以在此处查看。

以下是产品在 redux 中的导出方式：

import * as actionTypes from '../constants/productConstants';
import axios from 'axios';

export const getProductDetails = (id) => async(dispatch) => {
  try {dispatch({type: actionTypes.GET_PRODUCT_DETAILS_REQUEST});

    const {data} = await axios.get(`/api/products/${id}`);

    dispatch({
      type: actionTypes.GET_PRODUCT_DETAILS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: actionTypes.GET_PRODUCT_DETAILS_FAIL,
      payload: error.response && error.response.data.message ?
        error.response.data.message :
        error.message,
    });
  }
};

4

1 回答 1

2

你可以使用useStateReact 的钩子来创建状态。从数据库中获取产品后，您可以设置初始值，setCurrentSrc或者如果它来自道具，您可以像这样设置初始值const [currentSrc, setCurrentSrc] = useState(props.product.src)：

然后更改模型查看器的 src 以使用状态值，以便在状态值更改时自动重新渲染。最后，将 onClick 处理程序添加到一些具有setCurrentSrc更改状态功能的按钮。

const ProductViewer = (props) => {
  const [currentSrc, setCurrentSrc] = useState()
  const [srcOptions, setSrcOptions] = useState()

  const dispatch = useDispatch()
  const { loading, error, product } = useSelector(
    (state) => state.getProductDetails
  )
  useEffect(() => {
    if (product && match.params.id !== product._id) {
      dispatch(getProductDetails(match.params.id))
    }
  }, [dispatch, match, product])

  // update src and srcOptions when product changes
  useEffect(() => {
    setCurrentSrc(product.src)
    setSrcOptions(product.srcList)
  }, [product])

  return (
    <div className="productscreen__right">
      <model-viewer
        id="model-viewer"
        src={currentSrc}
        alt={product.name}
        ar
        ar-modes="scene-viewer quick-look"
        ar-placement="floor"
        shadow-intensity="1"
        camera-controls
        min-camera-orbit={product.mincameraorbit}
        max-camera-orbit={product.maxcameraorbit}
        interaction-prompt="none"
      >
        <button slot="ar-button" className="ar-button">
          View in your space
        </button>

        {/* add your switch buttons somewhere... */}
        {/* this assumes you have a srcList, but this could also be hardcoded */}
        {srcOptions.map((src) => (
          <buttton onClick={() => setCurrentSrc(src)}>{src}</buttton>
        ))}
      </model-viewer>
    </div>
  )
}
于 2021-11-02T19:42:58.510 回答