单击按钮时渲染额外的 React 组件答案

【问题标题】：Render extra React components when a button is clicked单击按钮时渲染额外的 React 组件
【发布时间】：2020-11-24 15:47:04
【问题描述】：

我正在做一个项目，当我点击一个按钮时，我尝试使用 React 来渲染一些组件。我是 React 和 JavaScript 的新手，所以有点困惑。单击按钮时，我设置了组件的状态，但它不会重新呈现。我的代码：

import React, {PureComponent} from "react";
import {render} from "react-dom";

let websocket = new WebSocket("ws://localhost:8081");
let scenarios = [];

    
websocket.onopen = function(){
    console.log("Frontend client connected");
    websocket.send("Get all scenarios available");
}

websocket.onmessage = function(event){
    const receivedMessage = event.data;
    
    if(receivedMessage.includes("Available scenarios")){
        scenarios = receivedMessage.split("/");
        console.log(scenarios);
    }
}

class App extends PureComponent{
    state = {
        scenariosReceived: false
    };

    handeStartClick = () => {
        this.setState({
            scenariosReceived : true
        })
    };

  
    render()
    {
    
        return(
            <div id="container">
                <button onClick={this.handeStartClick.bind(this)}>Start</button>
                {this.scenariosReceived? (
                <ol className="scenarios_list">
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[1]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[2]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[3]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[4]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[5]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[6]}</button></li>
                    <li><button onClick={this.handleScenarioSelection}>{scenarios[7]}</button></li>
                </ol>
                ) :(console.log("No scenarios received"))
                }
            </div>
        );
    }
}

任何想法都会有所帮助。非常感谢！

【问题讨论】：

标签： javascript reactjs button components rendering

【解决方案1】：

{this.scenariosReceived? (

你没有从这里的状态中获取价值，更正：

{this.state.scenariosReceived? (

【讨论】：

是的，就是这样。我为此花了两个小时哈哈。非常感谢！

【解决方案2】：

您可以拥有一个包含一组对象的状态，这些对象可以识别该 React 组件，并且单击即可将另一个对象添加到该数组中。

我将在下面提供一个我已经实现的代码，用于在 react-native 中的按钮单击中呈现组件

const [mediaRows, setMediaRow] = useState([
    // here I have a default compont so I have one object by default
    {id: 1, imgUri: '', moreInfo: ''},
]);
// this is the function that executed when the button clicked
const addMediaRow = () => {
  const lastId = mediaRows.length;
  setMediaRow([...mediaRows, {id: lastId + 1, imgUri: ''}]);
};

当数组改变时，下面的 JSX 会重新渲染

{mediaRows.map((media) => {
      return (
        <View
          key={media.id}
          style={[
            styles.mediaMediaContainer,
            {backgroundColor: colors.primary},
          ]}>
          <Avatar
            onPress={() => uploadImage(media.id)}
            source={
              media.imgUri
                ? {
                    uri: media.imgUri,
                  }
                : undefined
            }
            rounded
            size="medium"
            containerStyle={{
              backgroundColor: colors.backgroundDegree,
              marginRight: 10,
            }}
            icon={{
              name: 'photo-camera',
              size: 24,
              color: Colors.white,
            }}
          />
          <Input
            placeholder="Type More Information"
            overrideStyles={[
              styles.inputOverrideStyles,
              {backgroundColor: colors.mediaInput},
            ]}
          />
        </View>
      );

react 和 react-native 之间的逻辑——你只需要知道这个想法并改变 JSX，快乐的编码兄弟

【讨论】：

是的，这是个好主意。感谢分享！