我如何渲染沒有jsx格式的反應組件？

Question

我嘗試使我的「智能」彈出組件，它可以打開自己內部一些組件，但我的實現並不好，因爲它不工作。

我使用redux方法創建彈出窗口和打開彈出窗口的動作，可以在彈出窗口打開之前獲取任何打開的組件的名稱;

但我有一些問題，得到的參數後，在我們的情況下，它nameOfComponent，我需要選擇與名nameOfComponent渲染組件。

現在我的問題，它如何從數組呈現組件？

// He's my components 
import Login from '../Login/login.js'; 
import Logout from '../Logout/logout.js'; 


const popupContent = { 
    Login : Login, 
    logout: Logout 
}; 

// My component 
class Popup extends Component { 

    componentDidUpdate() { 
     // for example 
     const nameOfComponent = "Login"; 

     this.body = this.setBodyPopup(nameOfComponent); 

     return true; 
    } 

    setBodyPopup(property){ 
     return popupContent[property]; 
    } 


    render() { 
     // I want to render some element from popupContent here 
     <div> 
      // <this.body /> // it's jsx format 
      {this.body} 
     </div> 
    } 
} 

Answer 1

正如評論員建議，您可能希望無論是在構造函數或渲染方法本身內指定this.body。

但是，如果我正確理解你的意圖，你可以使用this.props.children來代替。 例如

<Popup><MyInnerComponent></Popup> 

並在彈出render方法

render() { 
    <div> 
     {this.props.children} 
    </div> 
} 

Answer 2

居然做出反應，您可以使用變量與JSX語法來實例化的組件。您實際上應該可以致電<this.body />並使其工作; 然而你的不會，因爲你沒有定義this.body直到componentDidUpdate方法，這意味着它將是第一次渲染未定義和打破一切。我建議使用本地組件狀態來代替this.body，並確保從一開始就定義它。

最起碼，在構造函數實例this.body一些值：

constructor(props) { 
    super(props); 
    this.body = 'Login'; 
} 

Answer 3

您可以使用<this.body />呈現組件，只要this.body具有實際價值。也許你只需要：

render() { 
    return <div> 
     {this.body ? <this.body /> : null} 
    </div> 
} 

有了你給的例子，不過，你可以把你的componentDidMount的內容在constructor代替，因爲構造函數是第一渲染通道之前調用。

Answer 4

我這裏JSfiddle ReactJS

加入工作例如你不必使用JSX。如果你這樣做，正確的做法是使用工廠。您還可以在呈現方法中呈現常規HTML，以及使用大括號在代碼中使用vanilla javascript。

也讓我將通過在數組所有項目的渲染方法建議映射和迭代和呈現逐一

見下面的例子：

var Login = React.createClass({ 
 
    render: function() { 
 
    return <div>{this.props.name}, logged in</div>; 
 
    } 
 
}); 
 

 
// React with JSX 
 
ReactDOM.render(<Login name="John" />, 
 
    document.getElementById('containerJSX')); 
 

 
// React without JSX 
 
var Login = React.createFactory(Login); 
 
ReactDOM.render(Login({ name: 'Tim' }), 
 
    document.getElementById('containerNoJSX'));

Answer 5

我想你正在尋找類似dangerouslySetInnerHtml的東西。

<div dangerouslySetInnerHTML={this.body} />