Передача переменных между компонентами в React.js

Question

фон

Я пытаюсь передать css class имя в variable называется styling к моему className на tr элемента. Я думаю, что моя проблема здесь в том, что мне еще предстоит понять концепцию props.

В принципе у меня есть component написанный в ES6, и я хочу, чтобы изменить css class из tr на основе стоимости child td.

Проблема

С моим текущим кодом я получаю

стиль не определен

Но это делает console.log все нужные css class так, я знаю, что все это хорошо минус фактическое class добавлено к className из тега tr. По какой-то причине он не пропускает переменную внутри от componentDidMount до render.

Вопрос

Пожалуйста, объясните мне, как пройти variables на протяжении всей моей React.jscomponent/components?

Пример

class TableDisplay extends React.Component{ 
        constructor(props) { 
        super(props); 
       } 
       componentDidMount() { 
        var styling = " "; 
       var tCells = document.getElementsByTagName("td"); 
       for (var i = 0; i < tCells.length; i++) { 
         if(tCells[i].innerHTML == "Approved") { 
         console.log("bg-success"); 
         styling = "bg-success"; 
        } else if (tCells[i].innerHTML == "Denied") { 
         console.log("bg-danger"); 
         styling = "bg-danger"; 
        } else { 
         console.log("bg-plain"); 
         styling = "bg-plain"; 
        } 
       } 
       } 
      render() { 
       return <div><table className="table"> 
         <tr className="seperate"><td>Title</td><td>Status</td><td>Created</td><td>Updated</td><td>Delete</td></tr> 
         {Object.keys(requests).map(function(key) { 
// Problem appears to be here 
          return <tr className={styling}> 
           <td>{requests[key].title}</td> 
           <td>{requests[key].status}</td> 
           <td>{requests[key].created_at.slice(0, 10)}</td> 
           <td>{requests[key].updated_at.slice(0, 10)}</td> 
           <td><a href="">Delete</a></td> 
           </tr>; 

             })} 
        </table> 
        </div>; 
      } 
    } 

, что я пытался

я думаю, что это может быть сфера или закрытия проблемы. Поэтому я попробовал.

Global

Создание стилизации глобальной переменной. Это не сработало.

Это

Пытались использовать this.styling. Это тоже не сработало.

перемещена Внутри Рендер

я переехал цикл внутри визуализации. Когда я это сделал, он добавил переменную стиля в className, но только первое начальное объявление styling = " ";. Так что в основном это просто сделало каждый tr пространства для className.

Answer 1

Предполагая, что ваш текст «Утвержден» и «Отказано» от requests[key].status. не можете ли вы просто сделать что-то вроде этого:

{Object.keys(requests).map(function(key) { 
    let styling = "bg-plain"; 

    if (requests[key].status === "Approved") { 
     styling = "bg-success"; 
    } else if (requests[key].status === "Denied") { 
     styling = "bg-danger"; 
    } 

    return <tr className={styling}> 
     <td>{requests[key].title}</td> 
     <td>{requests[key].status}</td> 
     <td>{requests[key].created_at.slice(0, 10)}</td> 
     <td>{requests[key].updated_at.slice(0, 10)}</td> 
     <td><a href="">Delete</a></td> 
    </tr>; 

})} 

Answer 2

Вы должны использовать state в своем компоненте, чтобы получить доступ к этим переменным, которые изменяются в разное время в течение lifecycle компонента.

При создании TableDisplay установить начальное состояние в конструкторе следующим образом:

class TableDisplay extends React.Component{ 
    constructor(props) { 
    super(props); 
    this.state = {styling: ""}; 
    } 

и на основе условной в вашей componentDidMount функции над изменением этого состояния с помощью функции setState следующим образом:

this.setState({ styling: "what ever you want to change it to"}); 

и получите доступ к этому статуту с помощью this.state.styling в вашей функции render следующим образом:

<tr className={this.state.styling}> 

Причина, по которой ваша функция render не может использовать переменную styling, потому что она не в той же области. После того, как componentDidMount было выполнено, переменная styling исчезла. Таким образом, состояние React позволяет вам получать доступ к переменным во всем компоненте.