如何在reactJS中呈現條件形式？

Question

有條件地，當導入名為“ entry ”的數組屬性時，我想呈現表單“ write ”，但瀏覽器中未顯示“ write ”（控制台中沒有錯誤）。 我應該為此使用子組件，還是您對其他方法有想法？

編碼：

render() {
        var replyList = questions.map(reply => {
            return (
                reply.feedback.map(singleReply => {
                    return (
                        <div>
                            <button
                                key={singleReply.id}
                                value={singleReply.button}
                                goto={singleReply.goto}
                                onClick={this.onButtonClick}>
                                {singleReply.button}
                            </button>
                        </div>
                    );
                })
            );
        });
        var write = (evt) => {
            //argument dla input
            var toWrite = questions[this.state.currentDialog].entry;
            //jeśli jest entry'
            if (questions[this.state.currentDialog].entry)
                return (
                    <form onSubmit={this.onInputSubmit}>
                        <label value={toWrite.label} />
                        <input
                            name={toWrite.name}
                            value={toWrite.value}
                            onChange={this.onInputChange}
                        />
                        <input type='submit' />
                    </form>
                );
        };
        return (
            //questions - pytanie, replyList - lista odpowiedzi
            <div className="App">
                {questions[this.state.currentDialog].question}
                <br /><br />

                {replyList[this.state.currentDialog]}
                {this.write}
                <br /><br />

            </div>)
    }

我的陣列的一部分：

{
        //[0]
        id: uuid.v4(),
        question: 'dialog1',
        feedback: [
            { button: 'reply1-1', goto: 1, id: uuid.v4() },
            { button: 'reply1-2', goto: 2, id: uuid.v4() },
            { button: 'reply1-3', goto: 3, id: uuid.v4() },
            { button: 'reply1-4', goto: 4, id: uuid.v4() }
        ],
        entry: { label: 'input1-1', name: 'input1', value: '1', id: uuid.v4() }
    },

Answer 1

為了顯示write您需要將其稱為

  return (
            <div className="App">
                {questions[this.state.currentDialog].question}
                <br /><br />

                {replyList[this.state.currentDialog]}
                {write()}
                <br /><br />
            </div>)

this不是必需的，因為write是在 render 方法中定義的。您還應該記住將函數放入 render 方法中的問題。

render 方法中的一個函數將在每次渲染時創建，這是一個輕微的性能損失。 如果你把它們放在渲染中也會很混亂，這是一個更大的原因，你不應該在渲染中滾動代碼來查看 html 輸出。 總是把它們放在課堂上。

Answer 2

write 是局部渲染作用域的一部分，不需要調用this.write 。 只需調用write 。 關於這一點，您還必須調用該函數： write()

除此之外，這不是問題的真正組成部分，但您會收到錯誤消息。 每個組件都必須返回一個“類似組件”的值。 如果條件不滿足，write 函數將返回 undefined ，這將引發錯誤。 返回 null 不會拋出錯誤，因為它是“類似組件的”