如何在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 不会抛出错误，因为它是“类似组件的”