如何在 React JS 中将 import 作为 props 参数传递

Question

I use react-lotties and i want to put differents animations in many div changing only the url of lotties

I am a react beginner, be kind please:)

this is my script:

• My lotties Component:

    import React, { Component } from "react"
    import Lottie from "react-lottie"
    import animationData from "./lotties1.json"
    import animationData from "./lotties2.json"
    import animationData from "./lotties3.json"
    import "./lotties.css"

    class LottiesC extends Component {
      render() {
        const defaultOptions = {
          loop: true,
          autoplay: true,
          animationData: animationData,
          rendererSettings: {
            preserveAspectRatio: "xMidYMid slice",
          },
        }

        return (
          <div className="x">
            <Lottie options={defaultOptions} height={600} width={600} />
          </div>
        )
      }
    }

    export default LottiesC

-My index.js Component:

       import React from "react"
        import Navigation from "../components/Navigation"
        import LottieControl from "../components/LottiesC"

        const index = () => {
          return (
            <section className="index">
              <div><LottiesC animationData ={lotties 1}  /> </div>
               <div><LottiesC  animationData ={lotties 2} /> </div>
              <div><LottiesC animationData ={lotties 3}  /> </div>
            </section>
          )
        }

        export default index

Answer 1

As already mentioned by @Dellirium you should be passing different values over props to your components.

Here is how it works:

 const animationDatas = [ { id: 'first' }, { id: 'second' }, { id: 'third' }, ]; class LottiesC extends React.Component { render() { const defaultOptions = { // loop: true, // autoplay: true, animationData: this.props.animationData, // rendererSettings: { // preserveAspectRatio: "xMidYMid slice", // }, } return ( <div className="x"> {/** <Lottie options={defaultOptions} height={600} width={600} /> **/} {JSON.stringify(defaultOptions)} </div> ) } } const App = () => { return ( <section className="index"> <div><LottiesC animationData={animationDatas[0]} /></div> <div><LottiesC animationData={animationDatas[1]} /></div> <div><LottiesC animationData={animationDatas[2]} /></div> </section> ) } ReactDOM.render(<App />, document.querySelector('#app'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>