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()

要补充一点，这并不是问题的一部分，但是您会得到一个错误。每个组件都必须返回“类似组件”的值。如果不满足条件，则写函数将返回undefined，这将引发错误。返回null不会抛出错误，因为它是“类似组件”的

如何在reactJS中呈现条件形式？

2 个答案: