將一個組件傳遞給另一個json數據

我正在創建一個幻燈片輪播的反應，我希望能夠在我解析出的json文件中列出幻燈片組件，並將其發送到父組件進行呈現。我可以看到它可以通過傳遞組件來完成，但我不確定如何將它從字符串解析爲實際組件。將一個組件傳遞給另一個json數據

我的JSON是這樣的：

{ "slides": 
[ 
{ 
    "id": "slide0", 
    "title": "Slide: 0", 
    "caption": "Slide caption: 0", 
    "slideNum": 0, 
    "url": "adminLogins", 
    "slideType": "<AdminLoginsChart />" 
}, 
...etc. json 
]}

我將元件傳遞到這樣的另一個組件：

<Slide component={this.state.slides[this.state.slideNum].slideType}/>

，但是當我把組件作爲一個JSON字符串，我可以似乎沒有把它變成一個通過的組件。用Nothing替換引號不起作用，並且執行JSON.parse（item）會給我一個json解析錯誤。有沒有人嘗試將字符串值作爲組件傳遞，並以某種方式將它們轉換爲組件？

來源

2017-10-05 bradrice

你很近！如果你需要它是一個JSON文件（這樣的字符串），那麼試試這個：

import YourComponent from './YourComponent';  

{ 
    slides: [{ 
    id: 'slide0', 
    title: 'Slide 0', 
    ... 
    slideType: 'YourComponent', 
    }], 
}

然後，在<Slide />的渲染你會做這樣的事情：

const components = [{ 'YourComponent': YourComponentReference }]; 

const Slide = ({ 
    component, 
} => { 
    const Component = components[component]; 
    return (
    <Component /> 
); 
});

來源

2017-10-05 16:31:06 paulruescher

這也不適合我。我需要將YourComponent放在字符串表示中以便放入json文件中。但即使我手動將其置於沒有引號的狀態，它也不會拉動組件。 – bradrice

這是一個使用你的方法的例子jsfiddle。看到有什麼不對？ https://jsfiddle.net/reactjs/69z2wepo/ – bradrice

是否有可能使用小提琴向我展示。在這裏，我試圖從另一個這裏拉一個組件，如你所示：https://jsfiddle.net/bradrice/69z2wepo/86971/忘記路徑問題 – bradrice

提供你的組件與幻燈片組件存儲在同一個文件夾中，javascript文件是大寫的（例如AdminLoginsChart.js），並且組件的名稱在你的JSON文件中可用（例如「slideType」：「AdminLoginsChart」），你然後可以用這種方式編寫您的幻燈片組件：

class Slide extends React.Component { 

    render() { 
    const { component, ...props } = this.props; 
    const Component = require(`./${component}`).default; 
    return (
     <div className="slide> 
     <Component {...props} /> 
     </div> 
    ) 
    } 

}

如果您的文件名使用的是下劃線，您可以使用lodashsnakeCase函數將組件名稱轉換爲文件名。

來源

2017-10-05 16:52:42

我試着但得到這個錯誤：React.createElement：類型無效 - 預計一個字符串（對於內置組件）或類/函數（對於複合組件），但得到：未定義。您可能忘記從您定義的文件中導出組件。 – bradrice

您需要修改我的示例以適應您的情況，例如如果組件的文件名是用小寫劃分的小寫字母，則需要從組件名稱表單轉換AdminLoginsChart到admin-logins-chart。 –

對不起，我聲明瞭一個'component'變量，但是接着使用'componentName'來代替下面的行...修正！ –

將一個組件傳遞給另一個json數據

回答

相關問題