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

Question

我正在做一个项目，当我点击一个按钮时，我会尝试使用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>
        );
    }
}

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

Answer 1

{this.scenariosReceived? (

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

{this.state.scenariosReceived? (

Answer 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的想法，并更改JSX，快乐的编码兄弟